Hướng dẫn tạo thanh mạng xã hội trượt ra khi cuộn trang cho Blogger

Hướng dẫn tạo thanh mạng xã hội trượt ra khi cuộn trang cho 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.5 s ease - in -out;
    transition - delay: .1 s;
    left: -70 px;
    top: 200 px;
}
.google - plus - now, .facebook - like - now {
    background: red;
    padding: 7 px;
    width: 68 px;
}
.google - plus - now {
    padding: 5 px 7 px 0 px;
}
.facebook - like - now {
    background: blue;
}
.kslsocialdock.show {
    visibility: visible;
    left: 0
}

đây là đoạn mã căn chỉnh giao diện mình thực hiện cho cái thanh chia sẻ mạng xã hội này.

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

ở đoạn mã trên bạn có thể thay số 150 bằng chiều cao khi mà người dùng cuộn xuống để nó bắt đầu xuất hiện.