Supaya lebih jelas yang mana dimaksud sidebar blog paling bawah, coba perhatikan kembali gambar ilustrasi di atas. Diilustrasikan sidebar blog paling bawah sebagai sebuah kotak berwarna hijau. Nah, widget ini yang akan diberi efek sticky.
Untuk membuat sticky widget sidebar paling bawah di blog terbilang sederhana dan mudah sekali. Ini karena kode HTML yang digunakan hanya sedikit dan prosedur pembuatannya pun tidak rumit.
Cara cepat buat Sticky Widget di Sidebar Blog Paling Bawah
Berikut cara membuat sticky widget di sidebar blog paling bawah.1. Pastikan kamu mempunyai jquery versi berapapun di template kamu. Biasanya jquery terletak sebelum kode HTML </head>. Contoh jquery kayak gini.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
Coba gunakan fungsi Find (Ctrl+F) lalu cari dengan keyword "jquery".
2. Copy-paste kode HTML berikut di atas kode HTML </body>.
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#HTML9').length) { // Ganti "#HTML9" dengan ID-widget-sidebar-mu
var el = $('#HTML9');
var stickyTop = $('#HTML9').offset().top;
var stickyHeight = $('#HTML9').height();
$(window).scroll(function() {
var limit = $('.featuredon').offset().top - stickyHeight - 20; // Jarak berhenti "#HTML9" dengan ".featuredon"
var windowTop = $(window).scrollTop();
var lebar = $(window).width();
if ((stickyTop < windowTop)&&(lebar > 759)) {
el.css({
position: 'fixed',
top: 104 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
- #HTML9 ganti dengan ID Widget sidebar kamu.
- .featuredon ganti dengan ID widget sidebar yang merupakan posisi berhentinya efek sticky.
- top=104 ganti dengan ukuran yang sesuai sama template kamu. Sahabat bisa coba pakai rumus saya yaitu top = 2 x tinggi header. jadi karena tinggi header template saya 52px maka top saya berikan 104 dan hasilnya pas. Kalau rumus di atas tidak sesuai dengan template sahabat, silahkan dicoba saja yang penting nilainya lebih dari tinggi header.
Catatan penting
Kenapa saya pakai .featuredon bukan #featuredon? Ini karena featuredon masuk kategori Class bukan id. Jadi kalau kategori widget kawan itu id ya pakai awalan # kalau Class pakai awalan dot (.).
3. Cari ID widget sidebar paling bawah yang ada di template kamu. Misalkan di template saya saat ini ID widgetnya adalah HTML9. Yuk perhatikan gambar!
3. Setelah melengkapi langkah 2 dengan ID widget kamu, selanjutnya klik Simpan Tema. Nah cek dah hasilnya.
Coba perhatikan kembali gambar di atas. Posisi stop sticky widget biasanya dibuat sampai footer. Nah sahabat bisa coba opsi 2 seperti yang ada di gambar tersebut. Jadi skema untuk Opsi 2 adalah Start dari #HTML9 dan STOP di #footer-widgets.
Sebagai tambahan, kalau sticky widget sahabat tidak responsive kawan bisa tambahkan kode berikut di CSS.
#HTML9{width:100%;max-width:300px;margin:0;}
Sesuaikan max-width:300px dengan ukuran sidebar sahabat. Buat ukuran max-width:300px kalau bisa kurang dari ukuran maksimal sidebar sahabat.
Ada ndak cara lain membuat sticky widget di sidebar blog gan? Ya, ada sahabat. Tunggu saja pembahasannya ya.
Itulah Cara cepat buat Sticky Widget di Sidebar Blog Paling Bawah. Semoga bermanfaat.