Mau Tau? Cara Paling Gampang Menciptakan Sticky Widget Blog - 100% Works

fezarzone    02.51    Blogger    Comment   

Also Read

Bila anda membaca blog ini, kemungkinan besar anda sudah mengetahui apa itu Sticky Widget atau mungkin minimal sudah ada sedikitnya gambaran. Tapi sebagai pemanis tidak ada salahnya di sini saya coba sampaikan perihal pengertian, citra kerja, dan fungsi dari Sticky Widget itu sendiri.

Sticky secara bahasa dapat diartikan 'menempel' atau 'melayang'. Dan widget yaitu gadget blog yang berada di sebelah samping / sidebar blog. Kaprikornus secara sederhana kita dapat definisikan bahwa sticky widget yaitu widget yang melekat 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 kalau kita terapkan fungsi sticky widget tersebut.

Adapun sticky widget ini biasanya digunakan 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 yaitu cara paling gampang menciptakan sticky widget blog Blogger yang insya Allah 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 isyarat ]]></b:skin> . Tekan CTRL+F untuk mempermudah pencarian. Copy script di bawah ini, dan pastekan sempurna di atas isyarat ]]></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 isyarat </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 dibentuk sticky.
6. Simpan Template.
7. Selesai. silakan dapat eksklusif dicek hasilnya. InsyaAllah berfungsi.

Itulah cara gampang menciptakan sticky widget di blog. Saran saya, tempatkan widget yang dibentuk sticky tersebut di sidebar paling bawah, alasannya kalau 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.