Cara Memasang Widget Melayang (Sticky) di Blog

Salah satu kekurangan template blogger EvoMagz yang saya gunakan sekarang adalah tidak tersedianya fitur kolom widget yang bisa melayang, atau disebut juga: sticky widget.

Penting, kah? Tergantung. Bagi saya sangat penting karena untuk mempertahankan cantiknya tampilan web blog. Ketika pembaca menggulir (scroll) halaman ke bawah, ada widget yang tetap muncul di sebelah kanan. Jadinya tidak kosong (kopong).

Pertanyaannya, bagaimana cara membuat dan menambahkan kolom widget yang bisa melayang tersebut?

Cara Memasang Widget Melayang (Sticky) di Blog

1. Yang pertama, tambahkan widgetnya. Di sini saya menerapkannya untuk widget artikel terbaru (recent posts) agar bisa melayang sesuai tutorial di postingan kali ini.

2. Buka blogger, lalu pilih tata letak (layout), dan tambahkan sebuah widget (add a gadget), pilih menu Feed. URL yang diperlukan:

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

Kalau ingin menampilkan widget artikel terbaru berdasarkan kategori (label), silakan gunakan URL di bawah ini:

https://anbusage.blogspot.com/feeds/posts/default/-/namalabel

Selanjutnya, ganti namalabel di atas dengan kategori artikel yang dituju. Kalau kategori terdiri dari dua (2) kata, tambahkan %20 sebagai pemisah. Contohnya: Tutorial%20Excel

Jika sudah memasukkan URL yang dituju, klik tombol Continue untuk meneruskan dan setting aturan selanjutnya sesuai keinginan.

3. Jika sudah, barulah kalian masuk ke template blogger.

4. Pada laman template blogger, klik menu lompat widget yang sudah ditandai:

5. Coba lihat kode ID dari widget artikel terbaru di bawah ini, ada kode yang sudah saya tandai. Kode ID inilah yang akan digunakan selanjutnya.

<b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed' visible='true'>
      <b:widget-settings>
   <b:widget-setting name='feedUrl'>https://anbusage.blogspot.com/feeds/posts/default</b:widget-setting>
   <b:widget-setting name='openLinksInNewWindow'>false</b:widget-setting>
   <b:widget-setting name='numItemsShow'>5</b:widget-setting>
   <b:widget-setting name='showItemDate'>false</b:widget-setting>
   <b:widget-setting name='showItemAuthor'>false</b:widget-setting>
  </b:widget-settings>
<b:includable id='main'>

6. Silakan tambahkan kode berikut ini, di atas kode ]]></b:skin>

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

7. Yang terakhir ialah tambahkan kode berikut ini, di atas kode </body>

<script type='text/javascript'>
  //<![CDATA[
$(function() {
    if ($('#Feed1').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
 var el = $('#Feed1');
 var stickyTop = $('#Feed1').offset().top;
 var stickyHeight = $('#Feed1').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',
     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>

Cukup mudah, kan? Apakah tutorial pemasangan widget melayang di atas bisa diimplementasikan di widget lainnya? Bisa. Dicoba saja.

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

Labels: Blogger,

Kalian baru saja membaca artikel Cara Memasang Widget Melayang (Sticky) di Blog. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.