Cara Membuat Sticky Widget Sidebar, Header di Blogspot

Sticky dalam bahasa kita adalah menempel. Jadi sticky widget akan selalu menempel di area pandang laman.

Ketika seseorang menggulir halaman kebawah, maka widget tersebut akan terus terlihat meski sampai pada dasar laman.

Biasanya, mereka memanfaatkan widget ini dalam mempromosikan akun media sosial dan sejenisnya. Namun saya belum pernah menemui ada Iklan/ Adsense yang dipasang diarea sticky. Entah apa alasanya, namun sepertinya itu memang tidak diperbolehkan.

Sebagai demo, coba Anda gulir halaman ini sampai kebagian terbawah. Maka akun sosial media saya akan terus terlihat.

Nah, untuk memasang kode-kodenya kedalam blog Anda, ikuti tutorial pemasangan kode berikut ini:

1. Masukkan CSS berikut diatas ]]></b:skin>
.KS_sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

2. Masukkan Javascript berikut diatas </body>
<script type='text/javascript'>
$(document).ready(function() {
var KS_stickyWidgetTop = $('#HTML6').offset().top;
var KS_stickyWidget = function(){
var scrollTop = $(window).scrollTop();  
if (scrollTop > KS_stickyWidgetTop) {
    $('#HTML6').addClass('KS_sticky');
} else {
    $('#HTML6').removeClass('KS_sticky');
}
};
KS_stickyWidget();
$(window).scroll(function() {
    KS_stickyWidget();
});
});
</script>
Editing
Ganti #HTML6 dengan ID widget HTML yang akan Anda atur sebagai Sticky

4. Simpan Template dan lihat hasilnya.
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini