Cara Membuat Sticky Widget Sidebar Pada Blog

Membuat Sticky Widget Sidebar Pada Blog - Membuat sticky widget sidebar dengan mudah pada blog agar widget yang diinginkan mengikuti saat discroll kebawah. Cara yang digunakan pada blog ini sangat mudah dan berhasil seratus persen. Fungsi dari sticky ini adalah untuk menunjukan widget sidebar yang ingin di perlihatkan oleh blogger kepada para pembaca agar pembaca melihat widget tersebut tanpa melewatinya.

Responsive Sticky Widget

Sticky widget dapat dibuat dengan mudah mengikuti script berikut yang dapat kamu lakukan dengan mudahnya. Yuk langsung saja kita praktekan langkah berikut untuk  bisa membuat widget ini.

Baca Juga  :

• Cara Membuat Widget Recent Post Sederhana Pada Blog
• Cara Membuat Widget Recent Post Berdasarkan Label

Widget pertama adalah sebagai berikut :

1. Masuk akun blog kamu
2. Pilih tab Edit HTML

Salin script dibawah ini sebelum tag ]]>[/b:skin] :

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

Lalu Save dan  salin script dibawah ini sebelum tag </body> :

<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>

Lalu kamu ganti #HTML8 menjadi id blog widget yang akan kamu jadikan sticky widget

Baca Juga :

Cara Mengetahui Id Widget Pada Blog

Kemudian save template lalu lihat hasilnya dan semoga berhasil dan apabila script diatas tidak berhasil, Kamu bisa mengikuti langkah kedua dibawah ini,

Widget Kedua Sebagai Berikut :

Ikuti langkah-langkahnya sebagai berikut:

1. Masuk ke akun blog kamu
2. Pilih tab Layout
3. Pilih add gadget
4. Pilih html/javascript

Lalu kamu salin kode berikut :

<style>
.sticky {
  position:fixed;
  top:10px;
  z-index: 100;
}
</style>
<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>

Lalu kamu ubah #HTML8 menjadi id blog kamu, Setelah itu kamu save dan lihat hasilnya dan semoga berhasil ya. Sekian pembahasan tutorial kali ini tentang Cara Membuat Sticky Widget Side Bar Pada Blog semoga bermanfaat dan lihat artikel tentang blogging di Manseo.