Cara Membuat Widget Melayang (Sticky) Saat di Scroll

Kali ini admin akan menjelaskan dan memberikan tutorial yang berjudul Cara Membuat Widget Melayang (Sticky) Saat di Scroll. Sebenarnya ada beragam cara untuk membuatnya , tetapi admin memilih yang paling mudah untuk kalian. Untuk yang masih bingung, yang dimaksud itu sebenarnya apa? . Tutorial ini akan membuat widget pilihan kalian yang ada di sidebar blog bisa melayang mengikuti, ketika di scroll ke bawah , dan ber henti di atas bagian footer .Untuk tutorialnya silahkan simak di bawah ini.

• Login ke Blogger

•  Klik Template > Edit HTML

• Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

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

• Selanjutnya kalian cari kode </body>
• Setelah ketemu, masukan kode dibawah ini tepat diatas kode body tadi

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

• Ganti #HTML6 dengan ID widget yang akan dibuat melayang.