Membuat Widget Sticky Di Blog ~ Lubang Pengetahuan

Membuat Widget Sticky - Sebelum itu saya akan menjelaskan dulu apa itu Widget Sticky yaitu widget yang bila di scroll kebawah maka widget yang di beri efek sticky akan mengikuti gerak scroll. Itu sekilas tetang Sticky, Oh ya sampai lupa mengapa saya baru membuat tutorial ini pada dah banyak yang sudah membuat tutorial ini, Karna masih banyak sahabat yang membuat tutorial ini yang sulit di pahami oleh para sobat yang baru bergelut di dunia blogging ini.dengan saya membuat tutorial yang mudah di pahami oleh sobat semuanya. Oke mari ikuti tutorial di bawah ini yang telah saya buat.

Berikut Cara Mebuat Widget Sticky

1. Masuk ke blogger
2. Masuk ke menu Template - Edit HTML
3. Cari kode ]]></b:skin> atau </style> dan copy kode di bawah ini tepat di atas nya

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

4. Cari kode </body> dan copy kode di bawah ini tepat di atas nya

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