Cara Membuat Widget Menempel Ketika Di Scroll

Membuat salah satu widget menempel ketika di scroll - Kali ini saya akan membagikan cara membuat widget menempel / Sticky widget di blog. Cara ini tidak sulit, hanya menambah 2 kode di dalam template. Membuat efek Sticky pada salah satu widget ini bertujuan untuk memudahkan pengunjung jika ingin menekan tombol pada widget blog kamu sekaligus mempercantik dan memperindah blog.
Bagi yang ingin membuat menu navigasi melayang/menempel, Baca : Cara Membuat Menu Navigasi Menempel Saat Di Scroll.

Oke, sekarang untuk membuat widget tetap menempel dan melayang di blog. Silahkan ikuti cara-cara berikut ini.

1. Masuk ke blogger
2. Pilih Template lalu Edit Html
3. Cari kode ]]</b:skin> dan letakan kode berikut di atasnya

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

4. Selanjutnya, cari kode </body> dan letakan kode berikut di atasnya

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

*Keterangan : ganti tulisan warna BIRU dengan ID widget kamu. Baca : Cara mengetahui ID widget blog.

5. Setelah itu simpan template dan lihat blog

Sekian artikel kali ini, semoga bisa membawa manfaat. Terima kasih dan selamat berkreasi!