Membuat Sticky Widget Sidebar di Blogspot

Membuat Sticky Widget Sidebar di Blogspot


Sticky widjet pada sidebar blog. Pernah lihat sticky widget pada sidebar. Kalo belum coba scroll dan lihat disidebar kanan blog ini . Pasti ada satu widget yang tidak terprengaruh oleh scroll, dan akan selalu mengikuti . Yaa.. itulah sticky atau menempel.
Untuk membuat sticky widjet cukup mudah, silahkan disimak.

Sticky Widget

1. Login ke blogger.com
2. Klik Template >> Edit HTML
3. Lalu tambahkan kode CSS berikut ini diatas ]]></b:skin>

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

4. Simpan kode berikut diatas </body>


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

5. Ganti HTML2 dengan ID widjet yang akan dibuat sticky atau menempel.
6. Save template . Dan bisa langsung  melihat hasilnya. Sekian.
Related Posts