Membuat Widget Melayang di Blogger saat di scrool

Widget memanglah sangat penting di sebuah Blog, selain mempermudah pengunjung untuk mencari apa yang ada di blog, untuk memasang iklan, video, foto, label, kategory" dan widget juga sangat mempengaruhi tampilan yang menarik untuk mempercantik bagi blog itu sendiri.

salah satunya dengan membuat Widget kita melayang saat di scrool,
untuk contohnya bisa lihat widget saya, untuk yang menggunakan dekstop/pc Scrool saja sampe bawah    

>>>>>>--------------------------------------------------------------->>>>>>>>>

Untuk membut widget melayang yang harus dilakukan adalah, menentukan widget mana yang mau di buat melayang,
contohnya kita ingin membuat seperti widget saya melayang,

Masuk Blogger.com
Tab Tata Letak
pilih widget yang ingin di buat melayang,
Klik edit
Ambil/Copy id HTML nya... lihat gambar



Setelah dapat id HTML nya, Close saja itu dan tambah widget baru dan masukan script dibawah ini.

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
<style>
.sticky {
position:fixed;
top: 0px;
z-index: 100;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML8').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML8').addClass('sticky');
} else {
$('#HTML8').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script></div>

NOTE : HTML8 yang saya merah kan ganti dengan Id HTML widget kalian yang ingin di buat melayang.

setelah menambah widget, coba save dan lihat blog kalian.

sekian tutorial dari saya. semoga artikel saya bermanfaat dan menambah wawasan kita semua.