Cara Mudah Membuat Sticky Widget Pada Blog

Cara Mudah Membuat Sticky Widget Pada Blog - Assalamualaikum, pada postingan kali ini saya akan share bagaimana Cara Mudah Membuat Sticky Widget Pada Blog. Pastinya sobat, para Blogger yang suka jalan-jalan liat-liat blog tetangga  sudah tidak asing lagi dengan sticky widget. Dengan mendengar namanya saja kita tau kalo sticky widget itu adalah widget yang lengket, artinya widget yang terdiam atau tertahan  di tempat ketika halaman blog discroll ke bawah.

 

Membuat sticky atau membuat lengket pada salahsatu widget di blog sangat berguna, salahsatunya agar widget tertentu masih dapat terlihat walaupun halaman terus discroll ke bawah, biasanya widget yang dibuat sticky adalah widget yang memberikan navigasi blog seperti, recent post, popular post atau katagori. Ada juga orang yang membuat sticky widget pada widget iklannya tujuannya agar iklannya bisa terus dilihat oleh pengunjung, sehingga memberikan peluang besar iklan tersebut diklik oleh pengunjung.


Untuk demonya saya tidak usah memberikan link, cukup melihat bagian sidebar blog saya. Di sana saya buat widget recent post menjadi sticky atau lengket sehingga walaupun halaman terus discroll ke bawah Widget tersebut tetap melekat di tempat.

Baca juga: Cara Membuat Kotak Catatan, Tips dan Larangan pada Blog


Untuk cara membuatnya perhatikan dan ikuti langkah-langkah berikut:

Cara Mudah Membuat Sticky Widget Pada Blog

1. Pertama masuk akun Blogger sobat, pergi ke Template >> Edit HTML


2. Kemudian letakan kode berikut tepat di atas kode </head>

<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>  

3. Apabila sudah selesai jangn lupa ganti tulisan "ID WIDGET" dengan id widget yang akan dibuat sticky.

         Baca juga:  Cara Mengetahui ID Widget pada Blog

4. Kemudian simpan template, dan lihat hasilnya.


Nah itu dia untuk tutorial kali ini, saya ucapkan selamat bagi anda yang berhasil dan terimaksih sudah mengunjungi blog saya, jangn lupa kalo ada pertanyaan atau kritik silahkan berkomentar di bawah.

Wassalamualaikum.