2 Cara Membuat Sticky Widget Sidebar dengan CSS dan jQuery

Sticky widget adalah widget yang bisa di bilang melayang atau mengambang apabila kita menscroll layar browser. Sticky widget ini biasanya menggunakan jQuery tetapi kali ini saya tidak hanya membuat tutorial cara membuat yang jQuerynya saja tetapi ada juga yang menggunakan CSS, untuk itulah saya akan memberikan 2 cara membuat sticky widget sidebar dengan CSS dan jQuery.

Sticky widget ini awalnya hanya support untuk template responsive saja, namun seiring berkembangnya kemajuan blog, kini hadir template AMP yang di sebut-sebut memiliki kecepatan yang tinggi di versi mobile. Untuk itulah sangat di butuhkan sticky widget sidebar dengan CSS, karena template AMP ini sangat anti jika di tempelkan script jQuery.

(Baca juga : Cara Membuat Widget Recent Post Muncul Saat di Scroll)

2 Cara Memasang Sticky Widget Sidebar dengan CSS dan jQuery di Blog

Untuk cara yang pertama kita akan memasang sticky widget sidebar dengan jQuery terlebih dahulu. Untuk itu ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Widget Komentar Postingan Terbanyak Responsive di Blogger)

1. Cara Membuat Sticky Widget Sidebar dengan jQuery

Langkah pertama masuk ke akun blogger sobat
Pilih menu Tema, pilih Edit HTML
Masukan kode di bawah ini tepat di atas kode </body>

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

Keterangan :

Silahkan ganti ID #sidebar-wrapper, #sidebar4, #footer-wrapper, sesuaikan dengan ID sidebar blog sobat
Jika tidak tampil baik, atau agak melebar silahkan masukan kode CSS ini pada ID CSS sidebar sobat.

#sidebar4{width:100%;max-width:260px;margin:0;}

Jika tidak berhasil, coba terus menggunakan ID CSS yang lain sampai berubah
Setelah selesai mengatur pilih Simpan tema.