Cara Bikin Sticky Widget V2 Blogger

Cara Membuat Sticky Widget V2 Terbaru Di Blog - Cara Mudah Bikin Sticky Widget Iklan Melayang di Blog Baru Kali ini kami 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 kami sudah pernah membagikan tutorial serupa yaitu Cara Memasang Membuat Sticky Widget di Blogger, postingan sekarang juga tentang sticky widget tapi kodenya sedikit berbeda dari sebelumnya dan lebih goodlah menurut saya. 

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("#HTML1");
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 )
Note : Ubah HTML1 menjadi Widget ID kamu
Sumber : http://alvinreborn.blogspot.com/2014/12/cara-membuat-sticky-widget-v2-terbaru.html