Cara Membuat Sticky Widget Responsive di Sidebar Blog

Cara Pasang dan Membuat Sticky Widget Responsive di Sidebar Blog

Sebenarnya, blog ini pernah memposting cara membuat Sticky Widget tetap melayang sampai di bagian Footer, tanpa menggunakan JavaScript.

Tanpa menggunakan JavaScript lho, ya!

Masalahnya, artikel tersebut saya hapus lantaran sudah banyak yang melakukan Copy Paste. Padahal, gak gampang mempelajarinya.

Kesalahan fatalnya, saya lupa menyimpan kode tersebut di Notepad. Jadinya agak susah ketika mau mencoba memasangnya lagi dengan tutorial yang pernah saya buat.

Big thanks to kangghani yang sudah berbagi tutorial simple dan mudah cara membuat Sticky Widget Responsive tetap melayang di Sidebar blog sampai di bagian Footer template.

Baca Juga: Cara Membuat Widget Muncul Ditempat Tertentu di Blog

Sebagai media dokumentasi, karena saya juga lagi menjalankan proyek blogging baru, dan karena gak mungkin juga bolak balik ke blog kangghani, jadi artikel kangghani tersebut saya tulis ulang.

Cara Membuat Sticky Widget Responsive di Sidebar Blog

Sticky Widget ini pada dasarnya sudah Responsive dan telah mengikuti anjuran pemasangan Sticky Widget yang benar itu seperti apa.

1. Login to Blogger
2. Theme > Edit HTML
3. Copy kode ini:

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#HTML1993').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#HTML1993');
var stickyTop = $('#HTML1993').offset().top;
var stickyHeight = $('#HTML1993').height();
$(window).scroll(function() {
var limit = $('#footer').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer"
var windowTop = $(window).scrollTop();
var lebar = $(window).width();
if ((stickyTop < windowTop)&&(lebar > 759)) {
el.css({
position: 'fixed',
width: '300px' // Atur dan sesuaikan dengan ukuran sidebar blog anda
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>

4. Simpan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

Jangan lupa, tambahkan kode CSS di bawah ini di deretan-deretan kode CSS untuk Sidebar di template blogger:

#HTML1993{width:100%;max-width:260px;margin:0;}

Baca Juga: Cara Mempercepat Loading Blog seperti AMP Blogger Templates

Perhatian: baca panduan di bawah ini dulu sebelum membuat dan memasang Sticky Widget di Sidebar blog.

Ubah atau ganti ID widget 1993 di atas dengan ID dari Widget yang Anda targetkan. Contohnya, apabila ID widget yang ingin di melayangkan adalah kode ini:

<b:widget id='HTML3' locked='false' title='' type='HTML' version='1'>...</b:widget>

Maka, ubah HTML1993 pada JavaScript di atas dengan ID widget yang ditargetkan untuk dilayangkan, yaitu HTML3. Sehingga hasilnya akan seperti di bawah ini:

if ($('#HTML3').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#HTML3');
var stickyTop = $('#HTML3').offset().top;
var stickyHeight = $('#HTML3').height();

Ubah juga HTML1993 pada CSS Responsive di atas dengan ID widget yang telah ditentukan. Sehingga menjadi:

#HTML3{width:100%;max-width:260px;margin:0;}

Jangan lupa, Guys... ubah juga kode #footer pada JavaScript diatas dengan lokasi tempat berhentinya widget, entah itu di Related Posts, widget komentar atau di Footer template.

Hasil secara keseluruhan, yang berhasil saya implementasikan ke dalam HTML Sang SEO Premium blogger template yang saya gunakan saat ini adalah kode dibawah ini:

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#HTML1993').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#HTML1993');
var stickyTop = $('#HTML1993').offset().top;
var stickyHeight = $('#HTML1993').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer"
var windowTop = $(window).scrollTop();
var lebar = $(window).width();
if ((stickyTop < windowTop)&&(lebar > 759)) {
el.css({
position: 'fixed',
width: '300px' // Atur dan sesuaikan dengan ukuran sidebar blog anda
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>

Dan kode CSS Responsive-nya adalah:

#HTML3{width:100%;max-width:300px;margin:0;}

Note: Ubah ukuran Max-Width diatas dengan ukuran Sidebar dari blog Anda, Sang SEO adalah 300px.

Template ini, Sang SEO blogger template, menggunakan kode footer-wrapper untuk pengaturan CSS dan ID-nya.

Baca Juga: Cara Mengatasi Google+ Badge tidak muncul di Blog

Perlu diketahui, agar Sticky Widget di Sidebar blog tidak menutupi widget lainnya di Sidebar, pastikan widget yang akan dimelayangkan berada dibagian paling bawah.

Tutorial cara pemasangan Sticky Widget ini juga berlaku untuk widget iklan Google AdSense.

Kode di atas sudah saya tambahkan ukuran lebar atau Width agar "Responsive" ketika melayang ketika di Scroll ke halaman bawah melalui layar desktop komputer atau laptop, sila disesuaikan... - 22 Feb 2018.

Itu dia Cara Pasang Sticky Widget Responsive di Sidebar Blog. Thanks, Kangghani dan semoga berguna.