Cara Membuat Widget Melayang/Sticky Ketika Di Scroll Sidebar

Widget yang melayang/menempel di sidebar blog ini sangat cocok jika anda seorang blogger yang suka membuat artikel tutorial atau panjang. Dengan widget yang menempel di sidebar blog akan membuat sidebar tidak kosong ketika pengunjung men-scroll untuk melanjutkan membaca artikel. Widget ini tidak bisa di close walaupun melayang karena berada di sidebar berbeda dengan widget yang berada diluar sidebar yang biasa berisi iklan sehingga bisa di close.
 
Sticty yang artinya lengket,maksudnya widget yang dibuat sticky akan lengket atau menempel di sidebar. Widget yang menempel bisa anda atur widget mana yang ingin dibuat melayang/menempel dengan mengganti id widgetnya,lalu apa fungsi widgte sticky.

Fungsi Widget Sticky

Karena widget ini melayang maka itulah fungsinya. Yaitu mengisi supaya sidebar blog anda tidak kosing ketika pengunjung menggulung ke bawah untuk melanjutkan membaca artikel. Lalu widget apa saja yang bisa melayang atau sticy? Semua widget yang memiliki 'id' bahkan iklan bisa dibuat melayang/sticky. 

Namun kadang-kadang widget ini tidak berfungsi dengan baik,ada beberapa template yang widget di sidebarnya tidak bisa dibuat sticky entah itu karena javascript atau cssnya. Widget sticky ini bisanya digunakan untuk meletakkan iklan,supaya CTR iklannya tinggi.Lalu bagaimana cara membuatnya? Ikuti saja langkah dibawah ini.

Cara Membuat Sticky Widget

Langkah 1

Silakan buka blogger, Template → Edit HTML

Langkah 1

Salin kode berikut lalu pastekan diatas kode ]]></b:skin>

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

Langkah 3
Cari kode </body> ,lalu salin kode dibawah lalu letakkan diatas kode </body>

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

Ganti kode yang berwarna merah dengan id widget yang ingin dibuat sticky,tanda # jangan dihapus.

Lalu Simpan template.

Mudah bukan,sekarang cek blog anda apakah widgetnya sudah sticky belum. Cukup sekian tutorial cara membuat sticky widget sidebar. Semoga bermanfaat.