Pasang Iklan Disini

Jumat, 20 Juni 2014

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.

Sidebar Sticky


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

Ketikkan email kalian dibawah dan klik Berlangganan untuk dapat berlangganan artikel kami:

Delivered by FeedBurner

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

 
notifikasi
close