Thêm nút like facebook,G+ vào blogspot

Thủ thuật này sẽ giúp các bạn thêm nút chia sẻ của các mạng xã hội vào cạnh bên trang blog của bạn. Khi bạn kéo thanh cuộn để đọc bài viết đến một vị trí nhất định thì Facebook, Twitter, Google+ thì thanh chia sẻ mạng xã hội cũng hiện ở bên cạnh trang.

Demo





Thêm tiện ích Floating Social Share Buttons cho Blogger


Thêm đoạn code
- Đăng nhập vào Blog
- Vào Bố cục (layout) => Bấm chọn mục Thêm tiện ích (Add widget) => Tạo một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào.

style>
/* Fixed Positioned AddThis Toolbox */
.sharing_box_itviet360 {
position: fixed;
top: 38%;
right: 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_itviet360 .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:45px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box_itviet360'>
<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>