Tiện ích theo dõi qua mạng xã hội cho Blogger

Ngày nay, những tiện ích theo dõi qua mạng xã hội (Widget Social Subscription) đang phổ biến trên tất cả mọi website. Lý do đơn giản là vì nếu bạn nắm trong nay một lượng người theo dõi càng lớn, thì đồng nghĩa với việc lưu lượng truy cập bạn sẽ càng cao. Qua việc đó thì chắc bạn cũng thấy được tiện ích này quan trọng đến mức nào. Như vậy điều quan trong bây giờ là cần phải thêm vào một tiện ích thật đẹp để bắt được cái nhìn của người dùng. Tại bài viết này mình xin chia sẻ widget theo dõi mình khá đẹp mà mình đã sử dụng.

Tiện ích theo dõi qua mạng xã hội cho Blogger

Hướng dẫn cài đặt và sử dụng tiện ích theo dõi qua mạng xã hội

Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML. Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS phía sau lên trên.
/* Social Subscription----------------------------------------------- */
.Twittco {
    background: url(http://3.bp.blogspot.com/-q2MgHeleol8/Uh16ETq7mxI/AAAAAAAAEuo/avmmQVhO3qU/s1600/twitter_bird.png) 0 0 no-repeat;
    padding: 0 15px 0 20px;
    margin-left: 0;
    height: 45px;
    }
.Twitterocfollow {
    background-color: #fff;
    width: 294px;
    height: 70px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    }
.iframeoftwi {
    margin-left: 55px;
    margin-top: -31px;
    }
.Socialiconsoc {
    background-color: #fff;
    width: 294px;
    height: 70px;
    background-repeat: no-repeat;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    }
.Facebookox {
    background-color: #fff;
    width: 294px;
    height: 40px;
    margin-top: -6px;
    background-repeat: no-repeat;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    }
.Feedburneroc {
    background-color: #fff;
    background-repeat: no-repeat;
    margin-top: -19px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width: 294px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    }
#subboxs {
    border: 1px solid #d2d2d2;
    padding: 5px 26px 5px 10px;
    color: #838383;
    font-size: 18px;
    height: 28px;
    font-family: "Rancho", cursive;
    outline: none;
    width: 146px;
    margin: 0 5px 0 0;
    }
#subbuttons {
    background-color: #3C3939;
    border: 3px solid #272727;
    cursor: pointer;
    color: white;
    width: 90px;
    height: 38px;
    margin: 0;
    font-size: 22px;
    font-family: "Rancho", cursive;
    margin-right: 4px;
    float: right;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }
#subbutton:hover {
    background-color: #292929;
    border: 3px solid #292929;
    }
Bước 2: Chọn Lưu mẫu và tiếp tục chuyển đến phần Bố cục trong Blogger.

Bước 3: Tại Bố cục bạn chọn vào Thêm Tiện ích tại vị trí mà bạn muốn đặt, tìm đến và chọn HTML/Javascript.

Bước 4: Tại hộp thoại của HTML/Javascript bạn chèn đoạn code phía dưới vào Nội dung.
<style>
@import url(http://fonts.googleapis.com/css?family=Rancho);
</style>
<div class="Socialiconsoc">
<table border="0" margin="0px" rules="none" cellspacing="0px" cellpadding="0px">
<tbody><tr valign="top">
<td style="padding-top: 12px; padding-left: 12px" width="60px">
<a href="http://feeds.feedburner.com/your-feedburner-id?ref=sb" target="_blank" title="Subscribe via RSS"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/rss.png" alt="RSS" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60px">
<a href="http://twitter.com/intent/user?screen_name=your-twitter-id&amp;ref=sb" target="_blank" title="Follow on Twitter"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/twitter.png" alt="Twitter" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60x">
<a href="http://www.facebook.com/your-facebook-ID?ref=sb" target="_blank" title="Follow on Facebook"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/facebook.png" alt="Facebook" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60x">
<a href="http://pinterest.com/Your-pinterest-ID?ref=sb" target="_blank" title="Follow on Pinterest"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/pinterest.png" alt="Pinterest" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60px">
<a href="http://www.youtube.com/Your-Youtube-ID?ref=sb" target="_blank" title="Subscribe on YouTube"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/youtube.png" alt="YouTube" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a>
</td></tr></tbody></table>
</div>
<div class="google+ss">
<div class="g-page" data-width="296" data-href="//plus.google.com/Your-Google-ID" data-layout="landscape" data-rel="publisher"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div align="left" class="Facebookox">
<div style="padding:8px 0px 5px 10px">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FYour-Facebook-ID&amp;width=284&amp;height=35&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:284px; height:35px;" allowtransparency="true"></iframe>
  </div>   </div>
 <div class="Twitterocfollow">
<div class="Twittco"></div>
<div class="iframeoftwi">
<a href="https://twitter.com/Your-twitter-id" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @Twiiter-Page-Name</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></div>
<div class="Feedburneroc">
<div style="padding:14px 0 11px 7px">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=Your-feed-burner-id', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input id="subboxs" name="email" onblur="if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }" onfocus="if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }" type="text" value="Enter your email address..." />
<input name="uri" type="hidden" value="Your-feed-burner-id" />
<input name="loc" type="hidden" value="en_US" />
<input id="subbuttons" type="submit" value="Subscribe!" />
</form></div></div>

Bước 5: Thay đổi toàn bộ những phần đánh dấu thành của bạn và lưu lại.

Sau khi làm xong 5 bước trên các bạn đã có được tiện ích theo dõi khá hữu ích và đẹp cho blog của bạn. Chúc các bạn sau khi sử dụng widget này có một blog ngày càng nhiều khách truy cập!

4 bình luận

  1. avatar says

    14:31 Ngày 24 tháng 11 năm 2014

    Cho tớ hỏi cái giá trị: opacity: 1; có thể xóa đi không, vì tớ thấy nó có vẻ thừa quá!

  2. avatar says

    16:51 Ngày 24 tháng 11 năm 2014

    Thuộc tính làm mờ color bạn ạ, theo mình hiểu vậy hi.

  3. avatar says

    10:54 Ngày 25 tháng 11 năm 2014

    Làm mờ thì đúng rồi. Có điều nếu giá trị bằng 0.1-0.9 thì còn nhìn ra, chứ bằng 1 thì tương đương với không dùng rồi! Lạ một cái là template mình đang dùng lại có khá nhiều giá trị này nên mới băn khoăn dụng ý tác giả ở đây là gì :-?

  4. avatar says

    13:05 Ngày 26 tháng 11 năm 2014

    Cái này mình lụm của người ta nên cũng không để ý =]]. Có thể hơi dư một tẹo, tác giả sử dụng Javascript onmouseover và onmouseout để thay đổi giá trị bình thường và bạc màu trong khi có thể sử dụng CSS3 đơn giản.

    Thủ thuật này cũng lâu rồi nên cũng không chắc nó có tối ưu không nửa :D

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.