Cách tạo nút Like Facebook và Google + trượt dọc bài viết

Tạo các nút liên kết chia sẻ bài viết theo kiểu trượt dọc là một trong những cách rất hiệu quả để tăng tính quảng bá cho nội dung của bạn. Thay vì đứng yên một chỗ đầu hoặc cuối bài viết, hộp chia sẻ trượt dọc luôn luôn đi theo tiến trình của người xem, điều đó làm tăng tỉ lệ click like và share.

Nếu dùng WordPress có khá nhiều plugin trợ giúp cho bạn nhưng với Blogspot bạn phải xài code. Code để tạo cũng rất đơn giản chỉ khoảng 15 dòng và bạn chỉ việc copy - paste vào là xong.

Ở phần Bố Cục > bạn chọn thêm tiện ích > rồi chọn HTML/Javascript - để thêm chức năng bên thứ ba (chú ý cái hộp HTML/Javascipt này bạn đặt bên tay phải ở cột right ấy và không cần đặt tên - tiêu đề cho nó)...

Tiếp theo là copy-paste đoạn code vào phần nội dung
Rồi nhấn Lưu

Cuối cùng dưới đây là đoạn code mà bạn cần copy



<style type="text/css">
#chiase {position:fixed; bottom:25%; margin-left:-730px; float:left; background-color:#FFFFFF;padding:2px;z-index:10;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border: 1px solid #CCCCCC;}
#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 />

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


Để thay đổi khoảng cách từ đáy lên trên, bạn điều chỉnh con số 25% ở phần bottom:25%, còn nếu muốn thay đổi khoảng cách với bài viết thì điều chỉnh giá trị -725px ở phần margin-left:-730px

Bạn Châu Giang có hỏi ở phần comment muốn thanh trượt dọc ở tận bên góc tay trái bám vào lề thì làm như thế nào, mình share luôn code nhé:

<style type="text/css">
#chiase {position:fixed; top:35%; left:0%; background-color:#2AA4CF;padding:2px;z-index:10;border-bottom-right-radius:5px;border-top-right-radius:5px;}
#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 />

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