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.
Guitar Chords

Popular posts from this blog

Ramalan Jodoh dan Pasangan Hidup Menurut Tanggal Lahir

Cara Mudah Ambil Uang di ATM BRI (+gambar)

Cara Mengetahui Hari Kelahiran Weton Jawa - Online