Cara Membuat Sticky Widget V2 Di Blogspot

“How To Make Blogger Widgets Sticky That Scrolls With Page”. Pastinya kalau sobat sering “jalan” ke blog-blog di luar sana, pernah melihat blog yang memberikan efek sticky pada salah satu bagian di blognya, bisa pada widget atau element lain pada blog. Sticky widget adalah widget yang letaknya diam/tertahan ketika halaman/page di scroll kebawah.

Mengenai Sticky widget sebelumnya juga anisuka  pernah membagikan tutorial serupa yaitu cara membuat sticky widget v1, postingan sekarang juga tentang sticky widget tapi kodenya sedikit berbeda dari sebelumnya. Mengenai sticky, background blog juga bisa di bikin sticky loh (baca: cara membuat background menjadi sticky). Sebenarnya bukan itu saja element-element lain juga dapat kamu ubah menjadi sticky.

DEMO SHOW

Di blog ini sendiri salah satu widgetnya dibuat menjadi sticky, kamu bisah 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 bisa juga kamu masukan ke widget HTML/JavaScript di Blog.

<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.
4. Simpan dan lihat hasilnya.

Baca juga:

• Cara membuat Responsive Navigasi Multi dropdown di blogspot.
• Widget Recent post efek Slide.

Ok sekian mengenai cara membuat sticky widget v2 semoga bermanfaat.

Diposkan oleh

Brando Mewo

You Might Also Like: