Cara Membuat Sticky Widget atau Widget Mengikuti Scroll

Selasa, 03 Februari 2015

Cara Membuat Sticky Widget atau Widget Mengikuti Scroll

Cara membuat sticky widget- Apa itu sticky widget? buat kalian yang belum tau apa itu sticky widget, sticky widget yaitu jika mouse kita scroll maka widget itu akan mengikuti mouse atau widget itu tetap pada posisinya, sticky widget berguna supaya pengunjung tetap melihat apa yang kita pasang pada widget tersebut, misalnya kita memasang sticky widget pada widget popular post, maka selama pengunjung membaca artikel, widget popular post paling tidak akan dilihat oleh pengunjung blog anda dan kemungkinan di klik akan semakin besar, tapi perlu diingat, jangan sampai kalian memasangnya pada google adsense karena itu melanggar kebijakan progam adsense, baik cukup itu saja penjelasanya.

Untuk mendapatkan fitur ini, perhatikan tutorial dibawah ini baik-baik :

1. Log in ke Blogger (yaiyalah masak ke facebook)
2. Masuk ke "Template" dan pilih "Edit HTML"
3. Copy code berikut diatas kode ]]></b:skin>

 .sticky {
  position:fixed;
  top:10px;
  z-index: 100;
}

4. Selanjutnya copy kode berikut diatas kode </body>

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