Cara Membuat Widget Sidebar Blog Menjadi Sticky (Menempel)

Selain kolom utama untuk menampilkan postingan, blog dengan layout dua atau tiga kolom tentu memiliki lebih banyak pilihan ruang untuk pemasangan widget-widget tertentu pada bagian sisi sampingnya, atau yang biasa disebut dengan istilah sidebar. Beberapa blogger biasanya menggunakan bagian sidebar ini untuk pemasangan widget-widget seperti recent post, populer post, random post atau bahkan untuk pemasangan iklan.

Posisi sidebar blog memang cukup bagus untuk dimaksimalkan agar fungsi dari masing-masing widget tersebut dapat berperan dengan baik dalam menarik perhatian pengunjung. Sedangkan untuk pemasangan iklan, keberadaan iklan yang dipasang di bagian sidebar juga diyakini cukup ampuh dalam meningkatkan jumlah klik untuk penghasilan blog kita. Oleh karenanya, pengelolaan bagian sidebar juga mesti diperhatikan dengan baik agar tidak sia-sia belaka. 

Pada postingan kali ini, saya akan membagikan sebuah cara untuk membuat widget pada sidebar atau bahkan bagian sidebar secara keseluruhan agar menjadi sticky atau tetap muncul saat halaman digulir. Dengan membuatnya menjadi sticky, maka pengunjung akan selalu melihat keberadaan elemen tersebut sehingga lebih berpeluang untuk diklik oleh mereka. Sebagai ilustrasi, berikut ini contoh screenshot widget popular post yang dibuat menjadi sticky. 

popular post tetap muncul saat halaman digulir

Agar lebih jelas terlihat hasilnya, silahkan anda bisa praktekkan langsung sesuai langkah-langkah di bawah ini. 

Cara Membuat Sidebar Blog Agar Menjadi Sticky

1. Buka akun blogger anda.

2. Pilih menu thema dan klik edit html.

3. Cari kode </body> dan letakkan kode berikut ini di atasnya.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

<script type='text/javascript'>

//<![CDATA[

$(function() {

  if ($('#PopularPosts1').length) { // Ganti "#PopularPosts1" dengan ID Widget tertentu

    var el = $('#PopularPosts1');

    var stickyTop = $('#PopularPosts1').offset().top;

    var stickyHeight = $('#PopularPosts1').height();

    $(window).scroll(function() {

      var limit = $('#footer-wrapper').offset().top - stickyHeight - 10; // Jarak berhenti di "#footer-wrapper"

      var windowTop = $(window).scrollTop();

      if (stickyTop < windowTop) {

        el.css({

          position: 'fixed',

          top: 10 // Jarak atau margin sticky dari atas

        });

      } else {

        el.css('position', 'static');

      }

      if (limit < windowTop) {

        var diff = limit - windowTop;

        el.css({

          top: diff

        });

      }

    });

  }

});

//]]>

</script>

</b:if>

Keterangan:

• Silahkan ganti yang ditandai warnai merah di atas (PopularPosts1) dengan ID dari widget atau iklan sidebar yang akan dibuat sticky. Bisa juga diganti dengan ID sidebarnya sekalian agar seluruh bagian sidebar (termasuk widget-widgetnya) menjadi sticky. 
• Script di atas hanya bekerja pada tampilan web/ desktop sehingga tampilan mobile tidak akan menjadi berantakan.
• Mungkin trik ini kurang cocok jika diterapkan pada blog yang memiliki header sticky. 

4. Simpan kembali template anda.

Silahkan anda bisa lihat hasilnya pada tampilan blog versi web. Tampilan widget sidebar pun kini menjadi sticky sehingga selalu terlihat meski halaman digulir ke bawah. Demikian. Semoga bermanfaat.