Begini Cara Menciptakan 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 ialah fitur gadget dalam blog. Maka kalau digabungkan, secara bahasa berarti widget yang menempel. Atau lebih jelasnya, sticky widget ialah widget yang senantiasa melekat 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 bab sidebar blog. Sahabat dapat melihat demonya pribadi pada blog ini. Silakan discroll ke bawah dengan mouse, maka widget popular posts akan senantiasa ada di sana. Maka, kali ini aku akan mengembangkan bagaimana cara menciptakan 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 isyarat berikut di atasnya.

 .sticky {

  position:fixed;

  top:10px;/* jarak dari atas*/

  z-index: 100;

}

5. Cari kode </body>. Lalu letakkan isyarat berikut sempurna 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 sobat pilih. Bisa Popular Posts, Blog Archive, Labels dan lain-lain. Untuk pilihannya, silakan cari pada Jump to widget. 

6. Save template. Selesai.

Silakan sobat lihat perubahan widget yang dipilih untuk dijadikan sticky. Semoga sesuai dengan apa yang sobat inginkan.

Artikel rekomendasi Cara Membuat Form Contact Us yang Menarik pada Blog.

Demikian cara menciptakan sticky widget pada blog. Semoga bermanfaat dan selamat mencoba.

Tweet

Subscribe to receive free email updates: