Membuat Sticky Widget Sidebar di Blogspot/Blogger

Sticky Widget | Pada kesempatan kali ini sya akan membagikan tutorial yang sangat singkat ini.

Sticky dalam Bahasa Indonesia artinya menempel. Sticky Widget Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll. Untuk demonya sendiri bisa dilihat di samping blog kang vanno.

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

Berikut Tutorialnya

Langkah 1 : Tambahkan CSS di atas kode </style> / ]]></b:skin>

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

Langkah 2 : Simpan Javascript 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.

Selamat berkreasi dengan Sticky widget.....

http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html

Dedi  Friday, July 11, 2014 

Blogging CSS