Membuat Widget Mengikuti Scroll atau Sticky Widget pada Sidebar Blog

Banyak dijumpai pada tampilan sebuah blog pada bagian samping atau sidebar blog akan turun ataupun naik mengikuti arah scroll mouse. Fitur ini disebut dengan sticky widget blogger.

Sticky widget blogger biasanya digunakan pada widget sidebar atau bagian samping. Selain itu, biassanya pada bagian header blog juga diterapkan fitur ini sehingga menjadi sticky header.

Fitur sticky widget ini bertujuan agar widget tertentu selalu bisa terlihat mengikuti arah scroll naik atau turun sehingga menambah besar kemungkinan isi dari widget tersebut akan dibuka atau diklik oleh pengunjung.

Widget yang sering dijadikan sticky biasanya berupa iklan, artikel terbaru, artikel populer dan sebagainya.

Jika sobat masih bingung dengan sticky widget, silahkan coba scroll halaman blog ini ke bawah dan perhatikan pada bagian sidebar. Ada widget yang mengikuti pergerakan arah mouse. Nah, itulah yang disebut dengan sticky widget blogger. Sampai disini sudah paham ya? Lanjut!

Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Sidebar Blog

Sebelumnya tenentukan ID widget yang akan dijadikan sticky widget.

• Masuk ke Dashbord Blogger
• Pilih menu Tata Letak
• Pilih widget yang ingin dijadikan sticky (Biasanya widget sidebar paling bawah)
• Catat ID widget tersebut

Keterangan:

Pada gambar diatas, ID widgetnya yaitu HTML3

Selanjutnya ikuti langkah-langkah berikut!

• Masuk ke Dashbord Blogger
• Pilih menu Tema/Template - Edit HTML
• Cari kode </body> (Biar lebih cepat pakai Ctrl + F)
• Letakkan kode berikut tepat di atasnya

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

Keterangan :

• Ganti ID sticky-sidebar dengan ID widget yang dipilih
• Ganti ID footer-wrapper dengan ID widget bagian bawah sebagai titik berhenti
• Biasanya ID footer-wrapper sudah sesuai jadi tidak perlu dirubah

Selanjutnya, tentukan lebar sticky widget agar tampilannya tidak berantakan/melebar ketika discroll.

Terapkan kode dibawah ini tepat diatasnya kode ]]></b:skin>

/* CSS Sticky */
#sticky-sidebar{width:100%;max-width:320px}

Keterangan :

• Ganti sticky-sidebar dengan ID widget yang dipilih
• max-width:320px adalah nilai lebar widget, silahkan disesuaikan

• Simpan dan lihat hasilnya.

Jika sobat ingin memasang gambar partner disidebar blog, silahkan coba terapkan Cara Memasang Widget Kotak Iklan di Blog

Sekian ulasan mengenai Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Sidebar Blog. Semoga bermandaat dan terima kasih.