Cara Membuat Sticky Widget (Widget Tetap Muncul Mengikuti Scrool) di Blog

Cara Membuat Sticky Widget (Widget Tetap Muncul Mengikuti Scrool) di blog

Ikuti langkah berikut yah,

1. Login ke blogger sobat.

2. Pergi ke dashbord > template > edit template.

3. Cari kode </body> dan letakan kode berikut ini tepat di atasnya.

<script type='text/javascript'>
$(function(){var offset=$(&#39;#HTML1&#39;).offset();var topPadding=100;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&#39;#HTML1&#39;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$(&#39;#HTML1&#39;).stop().animate({marginTop:0})}})});
</script>

4. Ganti kode #HTML1 dengan kode id widget sidebar blog sobat yang sobat ingin jadikan sticky widget.


ATAU bisa juga mencoba cara KangIsmet berikut ini:


Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu
1. Menambakan kode CSS
2. Menambah kode JavaScript

Menambah kode CSS

1. Login ke Blogger
2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

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

Tambahkan JavaScript

Simpan kode ini di atas </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>

Ganti #HTML7 dengan ID widget yang akan dibuat sticky.