Kamis, 27 Agustus 2015

Cara Membuat Widget Sidebar Statis Pada Blog

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

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

Sidebar Statis

Cara Membuat Widget Blog Sidebar Statis:

Cara Pertama, Membuat Widget Statis (1)
1. Letakan kode CSS di bawah ini di atas kode ]]></b:skin>
.sticky {
  position:fixed;
  top:10px;
  z-index: 100;
}
2. Kemudian letakan kode Java Script di bawah ini atas kode </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 tulisan 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 bagian sidebar. Contonya seperti pada gambar di bawah ini.
Cara Melihat ID Widget

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

Cara Kedua, Membuat Widget Statis (2)
Cara kedua ini lebih mudah dari yang pertama, Anda cukup memasang scripnya di Add Gadget kemudian 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.

The author of the blog Teknologivirtual

1 comments so far

terima kasih banyak sob artikelnya langsung di praktekin
idcheat.com
giribig.com


EmoticonEmoticon