Membuat Sticky Widget (Melayang Ketika Scroll Turun)

Sticky dalam bahasa indonesia mempunyai arti menempel, bagi yang sudah tau Sticky Widget mungkin saya tidak akan banyak menjelaskan, namun bagi sobat yang belum tau, saya akan menerangkannya sedikit, sticky dalam dalam istilah website berarti melayang diatas walau scroll turun kebawah, nah mungkin itu yang dapat saya jelaskan, apa bila masih bingung silahkan arahkan mouse sobat ke scroll blog ini, sekarang turunkan scroll nya dan lihat pada sidebar kanan yang bawah, nah itu dia Sticky Widget

Ikuti langkah dibawah ini untuk memasangnya pada blog anda

Menambahkan CSS
1. Setelah masuk di Blogger
2. Pilih Template dan pilih lagi Edit HTML
3. Copy kode dibawah ini dan letakkan di atas ]]></b:skin>

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

Menambahkan Javascript

Simpan Javasrcipt ini diatas kode </body>

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

Ganti ID #HTML3 dengan ID Widget yang akan dijadikan Sticky Widget.

Tweet