Bingung cara membuat Sticky Widget di Blogger? Coba cara membuat sticky widget ini!

Haisob apa kabar lagi? Pastinya kalau sobat sering berkunjung di blog-blog di luar sana, pernah melihat blog yang menambahkan efek sticky pada salah satu bagian di blognya, bisa pada widget atau element lain pada blog. Sticky widget adalah widget yang letaknya diam/tertahan/menempel ketika halaman/page di scroll kebawah.

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. Di blog ini sendiri salah satu widgetnya dibuat menjadi sticky, kamu bisa melihatnya sendiri (selama belum dilepas).

Sticky Widget


Cara Membuat Sticky Widget Di Blogspot
Sticky Widget



Cara Membuat Sticky Widget di Blogger


1. Di Blog Blogger 😃
2. Pilih menu Template ➔ Edit HTML
Bingung cara membuat Sticky Widget di Blog? Coba cara ini siapa tahu cocok!
Template - Edit HTML

3. Letakan  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 warna merah diatas dengan ID WIDGET yang ingin kamu jadikan Sticky.
4. Simpan dan lihat hasilnya.

Ok sekian mengenai cara membuat sticky widget di Blogger, semoga bermanfaat.
Join This Site