Cara Agar Widget Blog Tetap Ada Saat Scroll Kebawah

Assalaamu'alaikum - Memang sedikit aneh jika dilihat dari judulnya yaitu Cara Agar Widget Blog Tetap Ada Saat Scroll Kebawah. Istilah yang sebenarnya ialah Sticky Widget, namun bagi yang belum tahu pasti akan merasa bingung apa itu Sticky Widget. Hal ini juga pengalaman Saya sendiri yang melihat blog orang lain dan ada widget yang tetap melayang saat mouse di-scroll kebawah. Mau cari di seacrh engine tapi bingung kata kuncinya. Tapi sekarang Saya sudah tahu apa itu Sticky Widget.

Oh iya, ilmu ini Saya dapatkan dari Arlina Design. Juga banyak ilmu tentang blog Saya dapatkan disitu. Okeh, kita lanjut ke topik utama yaitu Cara Agar Widget Blog Tetap Ada Saat Scroll Kebawah. Ikuti langkah-langkahnya dibawah ini.

1. Kode Javascript sebelum </body>

Login ke Blogger > Pilih Template > Edit HTML > Masukan script dibawah ini sebelum </body>

JS<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("YUSUF");
//]]>
</script>

Ganti tulisan YUSUF  dengan widget id yang diinginkan. Bagaimana cara mengetahui widget id? Masih di Edit HTML, cari tulisan "widget id" didalam script HTML tersebut.

Untuk cara mencarinya, baca: Cara Mengubah Tulisan dan Link pada Bagian Tab Blog

Nanti akan banyak widget id yang ditemukan. Pilih widget id yang diinginkan. Contoh disini ialah HTML1, ini merupakan widget id dari Fanpage FB: siyusuf.com seperti yang bisa dilihat diblog ini.

Catatan:

Secara default, blogger akan memberikan widget id otomatis saat menambahkan gadget. Untuk penambahan HTML/Javascript yang pertama maka widget id yang terbentuk adalah HTML1. Untuk yang kedua adalah HTML2 dan begitu seterusnya.

2. CSS Script sebelum ]]></b:skin> atau </style>

Masih dalam Edit HTML, masukan script dibawah ini sebelum kode ]]></b:skin> atau </style>.

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

Ganti tulisan YUSUF  dengan widget id yang diinginkan.

3. Selesai

Simpan perubahan dan lihat hasilnya.

Mudah bukan? Coba sekarang. Oiya, untuk contoh yang sudah jadi bisa dilihat dibagian samping blog ini yaitu Fanpage FB: siyusuf.com. Sekian Cara Agar Widget Blog Tetap Ada Saat Scroll Kebawah. Semoga bermanfaat. - Wassalaamu'alaikum