Cách chèn nút like và share trượt dọc một bên cho blogspot

Ở bài trước mình đã hướng dẫn các bạn cách chèn nút like và share ở cuối bài viết cho blogspot, hôm nay mình tiếp tục có bài viết hướng dẫn cách chèn nút like và share trượt dọc một bên cho blogspot. Cách hiển thị này cũng có lợi ích rất lớn, giúp cho người đọc dễ tương tác với các nút like facebook, G+, share nội dung của bạn lên facebook, lên google +, gmail,...và nhiều mạng xã hội khác nữa, điều này sẽ giúp cho bài viết cũng như blog của bạn dễ dàng được chia sẻ và phát tán rộng rãi, một tiện ích rất có lợi cho SEO phải không?
Đây là ảnh demo:

Cách làm thì đơn giản lắm, bạn không cần sửa mẫu mà chỉ cần thêm tiện ích HTML/Javascript là được, cụ thể như sau:
Vào bố cục -> Thêm Tiện ích -> HTML/Javascript, rồi dán đoạn code dưới đây vào và lưu lại là xong.

<style>
/* huong dan thuthuat-vui.blogspot.com */
.sharing_box_thuthuat-vui {
position: fixed;
top: 38%;
left: 0;
border: 0px solid #00EE00;
padding: 3px 3px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #F0FFFF;
width: 55px;
min-height: 290px;
}
.sharing_box_thuthuat-vui .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:45px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box_thuthuat-vui'>
<div style='text-align:center; margin-top:5px'>
</div>
<!-- TWITTER -->
<div class='item twitter_float' style='margin-left:0px'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- FACEBOOK -->
<div class='item' style='margin-left:0px'>
<div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div>
<div id='fb-root'></div>
</div>
<!-- G+ -->
<div class='item' style='margin-left:0px'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='tall'></g:plusone>
</div>
<!-- OTHERSHARE -->
<div class='item' style='margin-left:0px'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'></a>
</div>
<!-- AddThis Button END -->
</div>
</div>
<!-- FAST SHARING SCRIPT -->
<!-- TWITTER SCRIPT -->
<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>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'>
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
<!-- ABC -->

Chúc các bạn thành công! Nếu thấy bài viết hữu ích thì like và share cho mình nhe!

Theo: Thuthuatvui