[Blogger Tips] Hướng dẫn thêm chức năng Floating Social chia sẻ vào Blogspot

Đây là một chức năng rất phổ biến và hữu dụng đối với dân làm Blog cũng như website. Bạn có thể gặp chúng ở bất cứ trang blog nổi tiếng nào trên mạng. Việc thêm chức năng này vào Blog sẽ giúp bạn tăng thêm rất nhiều sự quan tâm từ những mạng chia sẻ và chúng cũng góp phần hết sức quan trọng trong việc đưa Blog của bạn đến với người đọc một cách nhanh nhất. Trong bài này mình sẽ hướng dẫn các bạn một bước hết sức đơn giản để thêm chức năng này vào blog của các bạn. Những mạng chia sẻ có trong chức năng này là Facebook, Twitter, G+, Digg và dĩ nhiên bạn có thể thêm nhiều hơn chức năng và mạng xã hội khác nếu bạn muốn.

Để làm được điều đó thì bạn vui lòng thực hiện theo những bước đơn giản sau:

Bước 1: Bạn vào mục Bố cục/ layout
Bước 2: Chọn thêm một tiện ích/ widget ở một vị trí bất kỳ
Bước 3: Bạn chọn loại tiện ích là HTML/ Javascript
Bước 4: Bạn copy đoạn code sau vào ô trống trong cửa sổ widget mở ra.

<style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from Helpblogger.com">
<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div>
<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='mrbebibo' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href='http://feeds.feedburner.com/doanthieuda' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOwmwHApSQCZzJRll6m3Fe3HSM-eQKX8C-8th3ERoZcJWPzXwmbK4Ee0L4_qKxEVSoREe5oQaKip9yY5CE1W4THRKfJ5KTnFwjzCxCLjt14lzpdUqOkW5uqdffq3HdW6aCev1VRa3JA3SC/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://doanthieuda.blogspot.com/">widget</a></div> </div> </div>

Lưu ý:

Để chỉnh vị trí trái, phải cho tiện ích phù hợp với blog của bạn, bạn vui lòng chỉnh sửa đoạn code có màu đỏ sau thẻ margin-left để chỉnh vị trí.
Thay thế đoạn code màu tím "mrbebibo" để thay đổi tên toàn khoản twitter của bạn
Thay đoạn code màu xanh: http://feeds.feedburner.com/doanthieuda Bằng địa chỉ feed của bạn.

Bước 5: Lưu tiện ích lại và thưởng thức

Bài viết được dịch và đăng lại từ blog: http://helplogger.blogspot.com