Cara Membuat Sticky Widget Dengan Mudah Di Sidebar Pada Blog

Cara Membuat Sticky Widget Dengan Mudah Di Sidebar Pada Blog

Cara Membuat Sticky Widget Dengan Mudah Di Sidebar Pada Blog - Banyak orang yang bertanya tanya, bagaimana sih cara nya membuat widget di sidebar blog selalu menempel atau selalu mengikuti kemana scroll naik atau turun, kali ini saya akan berikan tutorial membuat sticky widget dengan lengkap.

Sebelum itu baca dulu kelebihan dari Sticky Widget :

Kelebihannya adalah membuat pengunjung menjadi lebih mudah untuk melihat Sidebar Widget yang kamu gunakan pada blog kamu, dan Sticky Widget ini pun tidak memperlambat atau tidak memberi efek berat pada blog kamu, jadi jangan takut untuk menggunakan Sticky Widget ini.

Berikut ini adalah Cara Membuat Sticky Widget Dengan Mudah Di Sidebar Pada Blog :

Pertama kamu ke Template trus Edit HTML kemudian Cari code :]]></b:skin> agar mudah mencari nya kamu bisa gunakan Ctrl+F :

Letakkan kode di bawah ini, diatas ]]></b:skin>

.sticky {
  position:fixed;
  top:10px;
  z-index: 100;
}

 Berikut ini adalah screenshot/gambaran nya :

Cara Membuat Sticky Widget Dengan Mudah Di Sidebar Pada Blog

Lalu letakkan kode di bawah ini,di atas

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

Note : Silahkan ganti warna Merah/HTML8 menjadi id widget yang ingin dibikin sticky widget nya.

Cara mengetahui ID Widget untuk mengganti HTML8 nya adalah dengan cara :

Ke Tata Letak >>> Lalu arahkan kursor mouse ke Edit yang mau kamu buat sticky widget nya >>> nanti kamu akan mendapatkan ID/Code dari HTML yang ingin kamu pakai.

Contoh :

Cara Membuat Sticky Widget Dengan Mudah Di Sidebar Pada Blog

Kemudian gantilah HTML8 dengan ID HTML baru yang ingin kamu buat sticky widget.

Semoga Berhasil :)

NYAMUKKURUS

1 Response to "Cara Membuat Sticky Widget Dengan Mudah Di Sidebar Pada Blog"

  1. Mantap dan berhasil diterapkan di blog saya, terima kasih.

    ReplyDelete