Cara Memasang Widget Mengikuti Scroll atau Sticky Widget pada Sidebar Blog

Sticky widget blogger adalah fitur yang sering ditemui di blog. Fitur ini membuat widget pada bagian samping atau header blog dapat tetap terlihat saat halaman di-scroll naik atau turun. Tujuannya agar pengunjung lebih mudah melihat dan mengklik isi dari widget tersebut, seperti iklan, artikel terbaru, atau artikel populer.

Untuk melihat contoh dari sticky widget, coba scroll halaman blog ini ke bawah. Perhatikan bagian sidebar, ada widget yang tetap mengikuti gerakan mouse. Itulah contoh dari sticky widget blogger. Mudah bukan? Selamat mencoba!

Memasang Widget Mengikuti Scroll atau Sticky Widget pada Sidebar Blog

Sebelumnya tenentukan ID widget yang akan dijadikan sticky widget.

• Masuk ke Dashbord Blogger
• Pilih menu Edit HTML
• Kemudian klik dropdown pada kotak jump to widget, disinilah ID widget terkumpul

Perlu diingat bahwa pemberian nama pada widget selalu berbeda di tema yang kamu pakai, maka dari itu cari saja nama widget di atas Image1

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>
	

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

Penutup