"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 seocips  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.

Cara Membuat Sticky Widget V2 Di Blogspot




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:
Ok sekian mengenai cara membuat sticky widget v2 semoga bermanfaat.
12 Komentar untuk "Cara Membuat Sticky Widget V2 Di Blogspot"

wah gampang yang ini bro...thanks ya...hiihihi..ane kasih bonus dehh biar cepet PO..

Makasih Mas.. Ini Lebih Gampang..
SAya Pake Cara Yang laen Gk Work :D

work, tapi bagaimana caranya agar widget tidak melewati bagian footer,, seperti stiky widget di blog ini

saya kok gak bisa-bisa ya bro ?dah pakai semua cara

misalnya yang ingin di sticky 2 , apa harus memasang kode di atas dua kali?

gan gmana biar stickynya gak nutupin widget bottom,. terima kasih

Ok gan, sticky widget yang ini memang mudah cara pemasangannya.

Wah iya gan, saya lupa membagikan update terbarunya, karena ada kodenya ada sedikit perbedaan, nanti saya bagikan sticky widget yang tidak menutupi footer di artikel berikutnya.

gan demonya dong, gue gk mudeng sama sekali tampilannya kek gmn -_-

iya bener gan, yang seperti sticky khusus yang tidak menutupi footer pada blog seocips ini gimana gan? share tutorialnya dong.

GIMANA INI MIN...
UDAH ADA SOLUSI GAK BUAT WIDGET STICKY YANG MENUTUPI BAGIAN FOOTER???