Cara Membuat Sticky Widget atau Widget yang mengikuti Scroll

"How To Make Blogger Widgets Sticky That Scrolls With Page". Yang Pasti kalau sobat danifin sering "jalan" ke blog-blog di luar di sana, pernah ngga melihat blog yang memberikan efek sticky pada salah satu bagian widget di blognya? atau element lain pada blog. Nah, untuk penjelasan sticky post sendiri, Sticky widget adalah widget yang letaknya diam/tertahan ketika halaman/page di scroll kebawah.

Mengenai sticky, background blog juga bisa di bikin sticky loh Sebenarnya bukan itu saja element-element lain juga dapat kamu ubah menjadi sticky. Tapi yang akan saya bahas adalah widgetnya

DEMO SHOW

Di blog ini sendiri salah satu widgetnya sudah dibuat menjadi sticky, kamu dapat melihatnya sendiri (selama belum dilepas), atau kamu bisa melihat contoh demonya di atas.

Cara Membuat Sticky Widget V2

1. Di blog kamu,
2. Pilih edit HTML template Blog,
3. Masukan kode dibawah ini di atas  </body> atau dapat juga kamu masukan ke widget HTML/JavaScript di Blog.
Script:

<script>
//<![CDATA[
bs_makeSticky("WIDGET_ID");
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.bs_sticking {position:fixed; top:0; z-index:9999;}
</style>

Sebelum save, ganti tulisan wanah merah diatas dengan ID WIDGET yang ingin kamu jadikan Sticky.
Contoh: HTML9, LABEL
4. Simpan dan lihat hasilnya.

Ok sekian mengenai cara membuat sticky widget semoga bermanfaat.
Baca Juga: Cara Menyembunyikan Widget