Membuat Widget Sidebar Melayang di Blogspot

 

Membuat Widget Sidebar Melayang di Blogspot - kali ini saya akan memberikan sebuah tutorial cara membuat widget melayang di blogger anda , langsung saja kita mulai :

Cara Memasang Kode Sticky di blog

1. login akun blogger anda.

2. Pilih Template kemudian Edit HTML, kemudian pasang kode berikut ini tepat diatas kode ]]></b:skin>

.sticky {position:fixed;top:10px;/* jarak dari atas*/z-index: 100;max-width: 300px;}

3. Lalu Tambahkan kode CSS berikut tepat diats kode </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML4').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();    
if (scrollTop > stickyWidgetTop) {
    $('#HTML4').addClass('sticky');
} else {
    $('#HTML4').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Ganti semua kode #HTML4 dengan ID widget yang akan dibuat sticky. 

4. Selesai dan lihat hasilnya.

Jika cara diatas tidak bisa berjalan, maka anda bisa menggunakan cara berikut ini untuk membuat widget sticky:

Membuat Widget Sticky Pada Sidebar

1. login akun blogger anda.

2. Pilih Template kemudian Edit HTML, kemudian pasang kode berikut ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function () {
    var offset = $("#HTML4").offset();
    var topPadding = 0;
    $(window).scroll(function () {
        if ($(window).scrollTop() &gt; offset.top) {
            $("#HTML4").stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            })
        } else {
            $("#HTML4").stop().animate({
                marginTop: 0
            })
        }
    })
});
</script>

Ganti #HTML4 dengan ID widget ayng ingin dibuat melayang (sticky).

3. Save template dan lihat hasilnya.

Bagaimana mudah bukan? sekarang anda bisa memulai Membuat Widget Sidebar Melayang di Blogspot dengan mudah. Semoga bermanfaat dan selamat mencoba.