Cara Membuat Widget Mengikuti Scroll atau Sticky pada Blog

Tutorial kali ini akan membahas bagaimana caranya membuat widget pada sidebar mengikuti scroll atau yang biasa disebut dengan sticky. Jadi apa itu sticky? Sticky artinya menempel. Jadi ketika scroll ke bawah, widget yang kalian pilih akan mengikuti scroll kalian. Untuk menggunakan fitur ini, sebaiknya kalian menggunakan widget yang berada paling akhir pada sidebar, karena jika tidak itu akan menindih widget yang lain ketika kalian scroll

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

1. Login ke blogger
2. Masuk ke "Template" dan pilih "Edit HTML"
3. Copy CSS berikut diatas kode ]]></b:skin>

.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  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>

Ganti HTML1 dengan ID widget yang akan kalian pakai

5. Terakhir save 

Sekian dulu tutorial kali ini, jika menemui masalah, isi kolom komentar dibawah ini 

Selamat Mencoba!

Tweet