Cara Membuat Widget Sidebar Melayang Mengikuti Mouse (Sticky)

Pernahkan anda ketika berkunjung ke suatu blog atau website pada saat mouse discroll ke bawah ada salah stu widget tetap terlihat,nah jika anda tertarik untuk mencontoh tampilan tersebut pada widget blog anda kali ini saya akan berbagi tentang Cara Membuat Widget Sidebar Melayang Mengikuti Mouse (Sticky).

Tutorial blog ini saya dapatkan dari blognya kang ismet yang selalu menjadi guru bagi saya dalam mempelajari ilmu tentang dunia blogging.Untuk melihat demonya lihat pada sidebar sebelah kanan merabah dunia ada salah satu widget yang tetap terlihat diatas seperti melayang walau muse sudah discroll kebawah.

Untuk membuat widget sidebar melayang (sticky) ada 3 langkah yang harus anda jalankan,silahkan ikuti satu persatu :

1.Menambah Kode CSS

1. login blogger
2. Kilik template lalu edit HTML
3. tambahkan kode CSS ini dibawah kode ))><b:skin>

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

2.Menambahkan Java Script

simpan kode ini dibawah kode </body>

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

3.pada kode yang dicetak tebal itu adalah widget yang anda bisa atur mana yang ingin tampil melayang atau tetap terlihat.misalnya anda memasang iklan di sidebar maka lihat html berapa,dengan cara edit template lalu cari posisi iklan pada sidebar seperti gambar ini.


Selamat mencoba dan berkreasi dengan Cara Membuat Widget Sidebar Melayang Mengikuti Mouse (Sticky).

TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://kumpulan2resep.blogspot.com/2014/02/cara-membuat-widget-sidebar-melayang.html. Terima kasih sudah singgah membaca artikel ini.