Cara Membuat Sticky Widget Sidebar di Blog

Cara Membuat Sticky Widget Sidebar di Blog - Kali ini saya akan mengajarkan kepada anda Cara Membuat Sticky Widget Sidebar di Blog. Apa Itu Sticky Widget Sidebar? Sticky Widget Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll. Anda bisa melihat Contohnya seperti pada gambar gif di bawah ini.

Cara ini sering di pergunakan untuk memperbanyak Like atau Follow FanPage, Twitter, Google+, dengan menggunakan cara ini 50% pengunjung Blog anda akan mengeLike dan Follow. Oke dari pada kelamaan yuk langsung saja ke langkah-langkahnya.


Berikut adalah Cara Membuat Sticky Widget Sidebar di Blog:

1. Login ke Blogger
2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

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

4. Kemudian cari kode </body>, dan letakan kode di bawah ini diatas 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>

Catatan: Ganti kode yang berwarna Biru dengan ID Widget yang akan dibuat Sticky.

5. Setelah semuanya selesai Klik Simpan, dan lihat hasilnya.