Cara Membuat Sticky Widget di Blog Mudah

Cara Membuat Sticky Widget di Blog Mudah. Halo sobat blogger, sering kali saat kita berkunjung ke blog orang lain ketika scroll ke bawah, ada widget sidebar yang posisinya tidak ikut turun. Nah itu dia yang dinamakan sticky widget. Posisi widgetnya tetap. Kali ini saya akan bagikan bagaimana cara membuat Cara Membuat Sticky Widget di Blog Mudah cukup 5 menit..:)

Cara Membuat Sticky Widget di Blog Mudah

1. Pertama, tentukan widget mana yang ingin kamu jadikan sticky widget? Misalnya pada website madamvia.web.id saya gunakan widget "Tips Blogging".

2. Cari ID widgetnya, caranya buka dulu halamam website kamu, misalnya www.madamvia.web.id lalu klik kanan pada browser yang kamu gunakan kemudian pilih "view source". Saya biasanya memakai add on "fire bug" untuk mencari id ini karena lebih gampang..:) Tinggal hover mouse, maka akan terlihat ID widgetnya..

Nah, disini ID widget saya adalah: HTML1

3. Selanjutnya, masuk ke akun blogger --> pilih template --> Edit HTML. Lalu cari kode: </body> dan copy + paste kode di bawah ini tepat di atasnya kode </body> .

<script type='text/javascript'> //<![CDATA[ // Sticky Widget function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML1"); //]]> </script>

catatan: masukkan ID widget yang ingin di sticky pada huruf yang di tandai.

4. Kemudian cari kode ini: ]]></b:skin> atau </style> lalu copy + paste kode di bawah ini di atasnya:

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML1 .widget-content {padding:0;margin:auto;}

catatan: masukkan ID widget yang ingin di sticky pada huruf yang di tandai.

5. Terakhir, simpan template dan cek hasilnya...:)

Jika ada yang ingin ditanyakan silahkan komentar ya sesuai dengan topik..terima kasih..;)

Share to:

Google+ Facebook Twitter