Begini Cara Membuat Sticky Widget Blog yang Benar


Begini Cara Membuat Sticky Widget Blog yang Benar
Cara Membuat Sticky Widget Blog yang Benar, Sahabat blogging mungkin ada yang bertanya, apa sticky widget itu? Sticky secara bahasa berarti menempel. Sedangkan widget adalah fitur gadget dalam blog. Maka jika digabungkan, secara bahasa berarti widget yang menempel. Atau lebih jelasnya, sticky widget adalah widget yang senantiasa menempel meski tampilan blog discroll ke bawah oleh mouse. Secara normal, widget biasa akan menghilang atau tidak tampak sesuai jarak scroll mouse tersebut pada tampilan.

Sticky widget ini biasanya diletakkan di bagian sidebar blog. Sahabat bisa melihat demonya langsung pada blog ini. Silakan discroll ke bawah dengan mouse, maka widget popular posts akan senantiasa ada di sana. Maka, kali ini saya akan berbagi bagaimana cara membuat sticky widget yang benar pada sahabat. Berikut tahap-tahapnya.
Artikel menarik Fakta Tentang Pasukan Blogspot yang Mengejutkan.

Cara Membuat Sticky Widget Blog

1. Masuk dasboard blogger.
2. Menuju ke Template.
3. Pilih Edit HTML.
4. Cari kode ]]></b:skin>. Letakkan kode berikut di atasnya.

 .sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

5. Cari kode </body>. Lalu letakkan kode berikut tepat di atasnya.

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

Ganti HTML3 dengan widget yang sahabat pilih. Bisa Popular Posts, Blog Archive, Labels dan lain-lain. Untuk pilihannya, silakan cari pada Jump to widget

6. Save template. Selesai.

Silakan sahabat lihat perubahan widget yang dipilih untuk dijadikan sticky. Semoga sesuai dengan apa yang sahabat inginkan.
Artikel rekomendasi Cara Membuat Form Contact Us yang Menarik pada Blog.
Demikian cara membuat sticky widget pada blog. Semoga bermanfaat dan selamat mencoba.

3 comments