Mengenal 15 Prosesor AMD Dari Awal Hingga Ryzen

Pada bulan Februari 2017, AMD secara resmi meluncurkan prosesor generasi terbarunya dengan nama kode Ryzen. Hadirnya generasi terbaru ini se...

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.

Berlangganan update artikel terbaru via email:

Related Post

2 Responses to "Cara Membuat Widget Sidebar Statis Pada Blog"

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

    BalasHapus
  2. kalau ingin agar sticky berhenti di atas footer gimana ya?

    BalasHapus

= > Silahkan berkomentar sesuai topik artikel di atas
= > Berkomentar dengan URL (mati/ hidup) tidak akan dipublish
= > Gunakan gaya bahasa dan tata penulisan yang mudah dipahami

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel