Tiện ích chia sẻ bài viết chạy dọc theo bài viết kiểu mới

Giới Thiệu

Đây là tiện ích chia sẻ bài viết lên các mạng xã hội nằm ngay dưới vị trí của Tiêu Đề Bài Viết. Nhưng điểm thú vị của tiện ích này khi ta kéo thanh trượt xuống thì những button chia sẻ này cũng tự động được kéo theo và chỉ ẩn đi khi đã đi qua phạm vi nội dung của bài viết. Như trước đây ta chỉ đơn thuần đặt các button này ngay dưới tiêu đề của bài viết, như vậy độc giả chưa hề đọc nên đâu có biết bài viết hay dở thế nào đâu mà like với share và tiện ích này đã khắc phục được nhược điểm này. Bạn hãy xem demo hình ảnh bên dưới để biết rõ hơn về tiện ích này

Làm cách nào để thêm tiện ích này vào blog

Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Chèn code sau trước thẻ </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

Lưu ý: Nếu trong template đã có code trên rồi thì bỏ qua bước này tránh xung đột
Bước 4: Dán code bên dưới trước thẻ </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
#trollvlSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
#trollvlSocialFloat td{padding:4px;margin:0;border:none;}
#trollvlSocialFloat td iframe{max-width:82px;width:82px !important;}
#trollvlSocialFloat.trollvlFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;
jQuery(document).ready(function(b){var a=b("#trollvlSocialFloat");a.wrap('<div id="trollvlSocialPlaceholder"></div>').closest("#trollvlSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#trollvlSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("trollvlFloatSocial"):a.removeClass("trollvlFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
// Twitter
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

• Thay đổi màu nền cho phù hợp với blog của bạn hoặc xóa đoạn code được bôi màu đỏ đi nếu bạn muốn nền trong suốt

Bước 5: Tìm thẻ <data:post.body/> và dán trước nó code sau

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="trollvlSocialFloat" class="trollvlSocialFloat">
<table  width="100%" class="trollvlSocialFloat">
<tr>
<td>
<a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
</td>
<td>
<iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</td>
<td>
<div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
</td>
</tr>
</table>
</div>
</b:if>

1. Đoạn được tô màu đỏ là button chia sẻ bài viết lên Twitter
2. Đoạn được tô màu xanh là button chia sẻ bài viết lên Facebook
3. Đoạn được tô màu tím là button chia sẻ bài viết lên G+

• Nếu không muốn button nào xuất hiện bạn chỉ việc xóa code đoạn đó đi

Bước 6: Lưu lại template