Cara Paling Mudah Membuat Sticky Widget Blog - 100% WORKS

Baca Juga

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

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

Adapun sticky widget ini biasanya dipakai oleh para blogger agar 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 adalah cara paling mudah membuat 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 kode ]]></b:skin> . Tekan CTRL+F untuk mempermudah pencarian. Copy script di bawah ini, dan pastekan tepat di atas kode ]]></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 tepat di atas kode </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 tulisan #HTML4 dengan widget ID yang mau dibuat sticky.
6. Simpan Template.
7. Selesai. silakan bisa langsung dicek hasilnya. InsyaAllah berfungsi.

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

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

loading...

Tweet

Berlangganan dan Dapatkan 5 Ebook Dahsyat tentang Motivasi, Personal Developement dan Financial Freedom - Gratis

Nama Depan

Alamat Email Valid