Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Cara Membuat Sidebar Menjadi Sticky Widget

Assalamualaikum wr.wb
Kemarin telah dibahas Cara Melihat ID Widget Pada Blog, maka sekarang akan saya bahas cara untuk membuat sidebar menjadi sticky widget. Sticky Widget itu merupakan sebuah widget yang melayang. Jadi, widget yang kita buat sticky ini akan melayang walaupun kita scrool ke yang paling bawah juga.



Jika ingin mencobanya silahkan ikuti langkah berikut ini:
  • Pertama cari dahulu kode ]]></b:skin>
  • Jika sudah ditemukan maka simpan kode dibawah ini tepat diatas kode ]]></b:skin>

.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

  • Lalu cari kode </body>
  • Kemudian simpan kode dibawah tepat diatas kode </body> tadi

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


Note: ganti kode yang berwarna hijau dengan ID widget yang akan dibuat sticky. Jika belum tau cara melihat ID widgetnya bisa lihat di artikel Cara Melihat ID Widget Pada Blog


  • Jika semua langkah diatas sudah dilakukan maka klik Simpan lalu lihat hasilnya


Dicukupkan sekian dari saya.
Semoga bisa menjadi manfaat.
Wassalamualaikum wr.wb


This post first appeared on TKJ Komunitas Indonesia, please read the originial post: here

Share the post

Cara Membuat Sidebar Menjadi Sticky Widget

×

Subscribe to Tkj Komunitas Indonesia

Get updates delivered right to your inbox!

Thank you for your subscription

×