Cara Memasang Sticky Widget Melayang di Sidebar Blog

Salah satu kekurangan template blogger EvoMagz yang pernah saya gunakan adalah tidak tersedianya fitur widget melayang di samping (sidebar) blog. Disebut juga: sticky widget.

Penting? Jujur, tergantung selera hehe.

Bagi saya, adanya sticky widget membuat tampilan blog tidak kosong (kopong) ketika discroll ke bawah oleh pembaca. Biasanya kan kopong tuh di sisi sebelah kanan! 😁

Faktanya, banyak blogger yang gak tahu kalau sticky widget bagus banget untuk SEO, lebih tepatnya untuk Bounce Rate blog. Karena dengan adanya sticky widget, secara gak langsung pembaca akan "diajak" untuk membuka artikel lainnya.

Singkatnya, semakin lama pembaca berada di blog kita, dan banyak halaman yang dibuka2 dalam sekali kunjungan, hal ini akan berdampak bagus terhadap Bounce Rate blog kita.

Google melalui algoritmanya akan menilai kalau blog kita "seolah2" disukai oleh pembaca. Pada akhirnya, ranking blog kita akan naik. Tentu, akhirnya akan mendapatkan prioritas untuk bisa berada di halaman pertama Google.

Cara Memasang Sticky Widget Melayang di Sidebar Blog

Perhatikan!! Di sini, saya menerapkannya untuk widget artikel terbaru (Recent Posts) dengan tag ID: HTML1

1. Blogger > Tata Letak (layout) > Tambahkan Widget (add a gadget) > Feed

Setelah ditambahkan, geser widget Feed ini ke paling bawah bagian sidebar blog, tujuannya agar tidak tertimpa atau menimpa widget lainnya ketika melayang.

2. Pada kolom URL Feed, tambahkan URL berikut:

https://mainblogseo.blogspot.com/feeds/posts/default

Jika ingin menampilkan widget artikel terbaru berdasarkan kategori (label) tertentu, silakan ganti dengan berikut ini:

https://mainblogseo.blogspot.com/feeds/posts/default/-/Template

Atau kategori yang terdiri dari dua kata:

https://mainblogseo.blogspot.com/feeds/posts/default/-/Template%20Blogger

3. Template Blogger > Edit HTML > Lompat Widget (Jump to Widget) ke HTML1.

Ingat! HTML1 adalah kode ID untuk artikel terbaru atau Recent Posts.

Cara Memasang Sticky Widget Melayang di Sidebar Blog

4. Copas kode di bawah ini, di atas kode ]]></b:skin>

#HTML1{width:100%;max-width:300px;margin:0}@media only screen and (max-width:768px){#HTML1{width:100%;max-width:100%}}

5. Langkah terakhir, tambahkan kode di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#HTML1').length) { // Ganti "#HTML1" dengan ID tertentu
var el = $('#HTML1');
var stickyTop = $('#HTML1').offset().top;
var stickyHeight = $('#HTML1').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
var windowTop = $(window).scrollTop();
var lebar = $(window).width();
if ((stickyTop < windowTop)&&(lebar > 759)) {
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>

6. Simpan template blogger 😉

Sebenarnya ada beberapa pengaturan yang harus atau tidak perlu diubah. Betul, kode yang sudah ditandai di atas. Bisa banget disesuaikan sendiri.

Jika bingung, boleh banget tinggalkan pertanyaan di kolom komentar. Bila perlu nanti dibantu. Oke...!!

Referensi:
https://www.nobel.web.id/2021/04/membuat-sticky-widget-di-template.html