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.

2 komentar:

  1. keren om, tapi kalau mau buat yang sticky popular post aja gimana..keadaanya popular post ane ditambah css lagi..
    http://dhanicyx.blogspot.com

    ReplyDelete
  2. ane pake kenapa ya gak bisa ???

    ReplyDelete