Ok sobat berikut ini seocips.com akan membagikan tentang " How To Make Blogger Widgets Sticky That Scrolls With Page " nah pastinya sobat sudah tidak asing dengan sticky widget kan? ituloh gan widget yang walaupun halaman website/ blog di scroll widgetnya tetap tertahan tidak ikut dengan halaman yang di scroll.

Mengenai Sticky widget sebelumnya juga seocips sudah pernah membagikan tutorial serupa yaitu cara membuat sticky widget, postingan sekarang juga tentang sticky widget tapi kodenya sedikit berbeda dari sebelumnya dan lebih goodlah menurut saya. Mengenai sticky background blog juga bisa di bikin sticky loh ( baca : cara membuat background menjadi sticky ).

Cara Membuat Sticky Widget V2

Ok berikut ini adalah Cara Membuat Sticky Widget V2

1. DI blog anda.
2. Pilih edit HTML template Blog.
3. Masukan kode dibawah ini di atas </body> atau langsung saja masukan ke HTML widget Blog. Tapi ingat tulisan berwanah merah dibawah ini tetap harus diganti dengan ID WIDGET yang ingin anda jadikan Sticky.
<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 {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style> 
4. Simpan dan lihat hasilnya ( umumnya berhasil mudahan anda juga berhasil ).

Baca juga:
Ok sekian mengenai cara membuat sticky widget v2 semoga bermanfaat untuk anda
8 Komentar untuk "Membuat Sticky Widget V2 Bagaimana Caranya?"

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

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.