Tạo nút like facebook trượt dọc cho blogspot

Tạo nút like facebook g+ trượt dọc bài viết cho blogspot

nút like facebook trượt dọc cho blogspot

Hướng dẫn các bạn tạo nút like trượt dọc bài viết cho blogspot

Ưu điểm: được thiết kế đẹp bắt mắt có hiệu ứng đổ bóng, vì được thiết kế trượt dọc nên visitor có thể thích bài viết bất cứ khi nào, mình đã chỉnh lại màu của nút like để trông nó khác biệt và đẹp mắt.

Nhược điểm: Hầu hết tiện ích like nào cũng làm giảm tốc độ load website, một nhược điểm tiếp theo là tốn diện tích, nếu bạn load trên web trên di động thì tiện ích sẽ chạy theo che bài viết mà màn hình di động lại khá nhỏ.

DEMO ngay trên bài viết này. Nguyên nhân bạn chỉ thấy +1 của G+ thôi là do bài viết đã có like của facebook nên không thể hiển thị like trượt facebook nữa. Thực hiện bài viết này ngay bạn sẽ thấy ấy mà, lười chụp ảnh Demo quá ^^

Nào bắt đầu tạo nút like trượt nào!

Bước 1: Các bạn vào lại trang tổng quan của blog của bạn » Mẫu » Chỉnh sửa HTML
Bước 2: Tìm đến thẻ </body> và thêm đoạn mã sau lên trên thẻ đó.

<style type="text/css">
#chiase {position:fixed; bottom:40%; margin-left:-96px; float:right; background-color:#914500;z-index:10;box-shadow:#914500 0 0 0 4px,0px 7px 1px 0px #000;-webkit-box-shadow:#914500 0 0 0 4px,0px 7px 1px 0px #000;-moz-box-shadow:#914500 0 0 0 4px,0px 7px 1px 0px #000;border: 1px dashed #fff;}
#chiase .nut {float:left;clear:both;}
</style>
<div id='chiase'>
<div style="margin:4px;">
<div class='nut' id='facebook'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<fb:like layout='box_count' show_faces='false'></fb:like>
</div>
<br /><br />
<div class='nut' id='google'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
<g:plusone size="tall"></g:plusone>
</div>

</div>
</div>

Thêm một code tạo nút like trượt cho blogger

Tiện ích này sẽ có 3 nút like gồm facebook, google và twitter và còn nút share lên các bạn xã hôi khác nữa

Cách thực hiện tạo nút like trượt blogspot vẫn như trên

Bạn tạo 1 HTML/JAVACTIPT mới, và dán code bên dưới vào là xong.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
<style>
/* Fixed Positioned AddThis Toolbox */
.sharing_box_ibiet { border-bottom: 5px solid #FF3D00;
position: fixed; z-index: 99999;
top: 10%;
left: 5px;
border-top: 5px solid #FF3D00;
padding: 5px 5px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #FFFFFF;
width: 60px;
min-height: 275px;
}
.sharing_box_ibiet .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:55px!important;
}
</style>

<div class='sharing_box_ibiet'>
<div style='text-align:center; margin-top:5px'>

<div class='item twitter_float' style='margin-left:3px'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
</div>

<div class='item' style='margin-left:3px'>
<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>

<div class='item' style='margin-left:5px'>

<g:plusone size='tall'></g:plusone>
</div>

<div class='item' style='margin-left:5px'>

<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'></a>
</div>

</div>


<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>


<script type='text/javascript'>gapi.plusone.go();</script>


<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></div></div>