Membuat sticky widget di situs blog ternyata sangat mudah sekali, anda hanya perlu menambahkan beberapa kode CSS dan kode JavaScript, maka sticky widgetpun jadi.
Kali ini saya mau berbagi tutorial cara membuat sticky widget di sidebar blog. Fungsinya yaitu untuk membuat widget tertentu menjadi sticky atau melayang mengikuti halaman saat di scroll ke bawah atau ke atas.
Jadi keuntungannya, para pengunjung akan selalu melihat widget itu, walaupun sudah sampai pada batas akhir artikel. Untuk lebih jelasnya, mari kita membuat sticky widget dengan mudah untuk di tampilkan di situs blog anda
Cara Membuat Sticky Widget di Sidebar Blog
1. Login ke Akun Blog → pilih Tema
2. Klik Edit HTML
3. Copy paste kode di bawah ini dan letakan di atas kode </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.
Catatan :
Catatan :
#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky
3. Tambahkan kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>
#sticky-sidebar{width:100%;max-width:300px}
Silahkan ganti 300px sesuai dengan lebar sidebar pada template yang sobat gunakan.
4. Simpan template