Cara Membuat Sticky Widget di Blog

Halo guys, sekarang saya akan berbagi tentang Cara Membuat Stciky Widget di Blog. Sticky Widget adalah cara untuk membuat widget mengikuti scroll pada mouse kita saat kita scroll. Nah penasaran pingin tau caranya, langsung aja lihat di bawah ini.

Cara Membuat Sticky Widget : 

• Menambahkan CSS 

1. Buka Blogger
2. Pilih Template lalu klik Edit HTML
3. Cari kode ]]></b:skin>, dan tambahkan kode dibawah ini di atas kode ]]></b:skin>

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

• Menambahkan Javascript, tambahkan kode di bawah di atas kode </body>

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

•  Ganti #HTML7 dengan Widget ID, jika belum tahu lihat gambar di bawah ini misalnya saya membuat Popular Posts menjadi sticky widget, maka buka tata letak dan ganti #HTML7 dengan Widget ID dari Popular Posts
  

Sekarang sudah tau kan Cara Membuat Sticky Widget di Blog. Jangan lupa share ke teman-teman ya. Terimakasih telah membaca artikel ini. Semoga Bermanfaat