Thanh mạng xã hội trượt ra khi cuộn trang cho Blogger
Trước đây khi template mới này mình không biết phải thêm mấy cái nút like, +1, với cả Tweet ở đâu cho hợp lý cả. Thì qua nhiều lần suy nghĩ mình đã dục nó qua bên phải và cho nó trượt ra khi người dùng cuộn trang xuống. Việc cho thanh mạng xã hội trượt ra mình cảm thấy khá ổn vì nó khiến người dùng để ý hơn trong quá trình thao tác trên trang web, từ đó chúng ra dễ dàng nhận được sự ủng hộ nhiều hơn từ những nút chia sẻ qua mạng xã hội này.
Với thiết kế hiện tại thì mình làm nó khá là đơn giản, lấy 2 tông màu chủ đạo của hai mạng xã hội làm màu nền và cho hiển thị 2 nút like và +1 bự với số lượt chia sẻ giúp cho người dùng có hứng thú hơn. Ok, ngay sau đây mình xin hướng dẫn một cách đơn giản nhất cách thêm nó vào Blogger / Blogspot của bạn.
Sau khi hoàn tất bạn chèn hết đoạn mã sau đây lên trên thẻ </body>
Xong thì tiếp tục chèn đoạn mã sau đây xuống dưới thẻ <body> nhé
 |
| Thanh mạng xã hội trượt ra trong Blogger |
Thanh mạng xã hội trượt vào Blogger
Đầu tiên thì bạn thêm đoạn css sau đây lên trên thẻ ]]></b:skin> nhé/* KslZone Social Dock */
.kslsocialdock{
position:fixed;
visibility:hidden;
overflow:hidden;
transition:all .5s ease-in-out;
transition-delay:.1s;
left:-70px;
top:200px;
}
.google-plus-now,.facebook-like-now {
background: red;
padding:7px;
width:68px;
}
.google-plus-now{
padding:5px 7px 0px;
}
.facebook-like-now{
background: blue;
}
.kslsocialdock.show{visibility:visible;left:0}Sau khi hoàn tất bạn chèn hết đoạn mã sau đây lên trên thẻ </body>
<!-- Ksl Social Dock -->
<div class='kslsocialdock'>
<div class='google-plus-now'><div class='g-plusone' data-size='tall'></div></div>
<div class='facebook-like-now'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false'/></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 150) {
$('.kslsocialdock').addClass('show');
} else {
$('.kslsocialdock').removeClass('show');
}
});
});
//]]>
</script>Xong thì tiếp tục chèn đoạn mã sau đây xuống dưới thẻ <body> nhé
<div id="fb-root"></div>
<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/vi_VN/sdk.js#xfbml=1&appId=191743990857285&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="https://apis.google.com/js/platform.js" async="" defer=""></script>
