Blog Ardhana - Selamat pagi siang sore malam buat kamu yang sedang membaca artikel saya ini. Pada kesempatan ini saya akan berbagi tutorial bagaimana caranya membuat sticky widget di sidebar blog. Tentu kamu sudah tahu fungsi dari Sticky Widget ini, yakni membuat widget melayang saat di scroll. Tutorial kali ini, saya kutip dari blog Arlina Design.
Kode yang akan saya bagikan ini, lebih cocok di pasang di semua konten widget maupun widget tertentu. Jika kamu ingin tahu bagaimana tutorialnya, mari kita praktekkan.
Membuat Sticky Widget di Sidebar Blog
1. Login Blogger> Buka Template Editor> Tambahkan kode di bawah ini sebelum tag </body><script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#sticky-sidebar');
var stickyTop = $('#sticky-sidebar').offset().top;
var stickyHeight = $('#sticky-sidebar').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky2. Selanjutnya tambahkan lebar pada konten atau widget yang akan dibuat sticky dengan CSS.
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky
Misalkan saya memberikan 300px untuk lebar sticky. Contoh:
#sticky-sidebar{width:100%;max-width:300px}#HTML1{width:100%;max-width:300px}@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}