Cara Paling Mudah Membuat Sticky Widget Blog - 100% WORKS

Bila sahabat membaca artikel ini, kemungkinan besar sahabat sudah mengetahui apa itu Sticky Widget atau mungkin minimal sudah ada sedikitnya gambaran. Tapi sebagai suplemen tidak ada salahnya di sini saya coba sampaikan ihwal pengertian, gambaran kerja, dan fungsi dari Sticky Widget itu sendiri.

Sticky secara bahasa mampu diartikan 'menempel' atau 'melayang'. Dan widget ialah gadget blog yang berada di sebelah samping / sidebar blog. Kaprikornus secara sederhana kita mampu definisikan bahwa sticky widget ialah widget yang menempel atau melayang. Dalam artian widget di sidebar tersebut tidak akan bergerak walaupun kita menggulir-gulirkan / scrolling layar ke atas ataupun ke bawah. Karena pada kondisi layar normal, sebuah widget akan ikut terbawa arah scrolling, semakin discroll ke bawah, maka widgetnya akan hilang tertinggal di atas. Namun beda halnya bila kita terapkan fungsi sticky widget tersebut.

Adapun sticky widget ini biasanya dipakai oleh para blogger biar sebuah widget tertentu menjadi lebih terlihat menonjol, terlihat terus walau layar di-scroll. Cocok untuk digunakan pada widget iklan atau promosi, kecuali iklan Google Adsense. Karena dari pihak Google sendiri yang saya tahu tidak memperbolehkan penggunaan mode sticky pada iklan-iklan Google Ads yang tampil. Intinya sticky widget ini berfungsi untuk meningkatkan impresi atau jumlah penayangan, sehingga peluang terjadinya interaksi dari visitor menjadi lebih meningkat.

Baik, sudah cukup saya rasa pembukaannya. Langsung saja, berikut ialah cara paling mudah membuat sticky widget blog Blogger yang insya Tuhan 100% works. Chek these out.

1. Pastinya login dulu ke akun blogger
2. Setelah masuk dashboard, klik menu Template. Lalu klik tombol Edit HTML.
3. Cari arahan ]]></b:skin> . Tekan CTRL+F untuk mempermudah pencarian. Copy script di bawah ini, dan pastekan sempurna di atas arahan ]]></b:skin> tadi.

.sticky {
  position:fixed;
  top:10px;
  z-index: 100;
}

4. Belum selesai. Langkah berikutnya cari kode  </body> Copy script di bawah ini dan paste sempurna di atas arahan </body> tadi

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML4').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();    
if (scrollTop > stickyWidgetTop) {
    $('#HTML4').addClass('sticky');
} else {
    $('#HTML4').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

5. Ganti goresan pena #HTML4 dengan widget ID yang mau dibuat sticky.
6. Simpan Template.
7. Selesai. silakan mampu pribadi dicek hasilnya. InsyaAllah berfungsi.

Itulah cara mudah membuat sticky widget di blog. Saran saya, tempatkan widget yang dibuat sticky tersebut di sidebar paling bawah, alasannya bila ditaruh di bab atas atau tengah sidebar dikhawatirkan akan menutupi widget-widget lain yang berada di bawahnya.

Baik, sekian saja tutorial ini. Silakan diprektekkan dan semoga bermanfaat.