Cara Menciptakan Widget Sidebar Statis Pada Blog

Struktur blog pada umumnya memiliki widget yang terpasang pada sidebar kanan dan atau kiri. Widget tersebut sanggup berisi iklan, popular post, kategori dan lain sebagainya. Sesuai dengan judul artikel menciptakan widget sidebar statis, yang artinya widget pada sidebar tersebut tidak bergerak (tetap) saat scroll digeser ke bawah.

Mungkin juga cara ini disebut Sticky (melayang), namun pada dasarnya sama yaitu widget pada sidebar tidak bergerak. Keuntungannya widget tetap terlihat meskipun pembaca menscrollnya ke bawah. Setidaknya ada 2 cara menciptakan widget statis, yaitu sebagai berikut.

Cara Membuat Widget Blog Sidebar Statis:

Cara Pertama, Membuat Widget Statis (1)
1. Letakan arahan CSS di bawah ini di atas kode ]]></b:skin>

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

2. Kemudian letakan arahan Java Script di bawah ini atas arahan </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> 

3. Ganti goresan pena yang berwarna merah dengan id widget Anda
4. Simpan dan lihat hasilnya.

Cara Melihat ID Widget:
Login ke akun blogger > Template > lihat id widget pada bab sidebar. Contonya menyerupai pada gambar di bawah ini.

Note. Usahakan ID Widget yaitu widget yang paling terakhir biar widget di atasnya ikut statis (tetap).

Cara Kedua, Membuat Widget Statis (2)
Cara kedua ini lebih gampang dari yang pertama, Anda cukup memasang scripnya di Add Gadget lalu simpan. Berikut ini caranya:

1. Login ke akun blogger > Tata Letak > Tambahkan Gadget > pilih HTML/ Java Script
2. Kemudian tambahkan script di bawah ini

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

3. Caranya sama dengan cara pertama dengan mengagnti HTML8 dengan ID Widget Ada. Misalnya PopularPost1
4. Simpan dan lihat hasilnya.

Share this post