Cara Membuat Sticky Widget Sidebar di Blog - Kali ini saya akan mengajarkan kepada anda Cara Membuat Sticky Widget Sidebar di Blog. Apa Itu Sticky Widget Sidebar? Sticky Widget Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll. Anda bisa melihat Contohnya seperti pada gambar gif di bawah ini.
Berikut adalah Cara Membuat Sticky Widget Sidebar di Blog:
1. Login ke Blogger
2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>
.sticky {
position:fixed;
top:10px;/* jarak dari atas*/
z-index: 100;
}
4. Kemudian cari kode </body>, dan letakan kode di bawah ini diatas kode </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>
Catatan: Ganti kode yang berwarna Biru dengan ID Widget yang akan dibuat Sticky.
5. Setelah semuanya selesai Klik Simpan, dan lihat hasilnya.
Kerennn ...
ReplyDeletekebetulan aku lagi butuh ginian ..
*jangan pasang link idup di blogku gan!
lo balesnya lama w pasangin aja :p
Deletemantep; gan :-) :-) :-) :-)
ReplyDelete(k) (k) (k) (k) (k)
Deletekeren gan, ane butuh nih yang kaya gini
ReplyDeletemonggo di cona gan (b)
Deletemonggo ;-(
ReplyDelete