Kode yang akan saya bagikan ini lebih cocok dipasang pada semua konten di Sidebar atau bisa juga dipasang pada salah satu widget tertentu. Bagi Anda yang ingin mencobanya, silakan ikuti tutorial Cara Membuat Sticky Widget di Sidebar Blogger.
Cara Membuat Sticky Widget di Sidebar Blogspot
1. Login ke Blogger > Buka Template editor > Tambahkan kode di bawah ini sebelum </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>
Perhatikan kode yang ditandai, ganti kode tersebut dengan ID yang akan dibuat sticky sesuai template yang digunakan.
#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky
Selanjutnya tambahkan lebar pada konten atau widget yang dibuat sticky dengan CSS. Misalkan di sini saya memberikan 300px untuk lebar sticky, contoh :
#sticky-sidebar{width:100%;max-width:300px}
Atau
#HTML1{width:100%;max-width:300px}
Tentukan lebar sesuai dengan lebar sidebar dari template yang Anda gunakan dan juga jangan lupa untuk mengganti lebar pada media query tertentu, contoh :
@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}
Demikian artikel tentang Cara Membuat Sticky Widget Blogger di Sidebar, semoga bermanfaat. Sampai jumpa pada artikel selanjutnya.