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.

(Baca juga : Cara Mudah Membuat Widget Artikel Pilihan Di Blog)

2. Cara Membuat Sticky Widget Sidebar dengan CSS

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

<style type='text/css'>
#sidebar-sticky {
  width: 300px;
  float: right;
  padding: 0;
  margin: 0 auto;
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}
</style>

• Catatan :
• width= Digunakan untuk mengatur lebar sidebar template blog sobat
• top = Digunakan untuk mengatur tinggi header widget sobat
• Sesuaikan dengan template blog sobat
• Pastikan CSS blog sobat tidak menggunakan overflow.
• Kemudian masukan kode di bawah ini tepat di bawah kode </aside>

<div id='sidebar-sticky'>
  <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
  </div>

• Setelah selesai pilih Simpan tema
• Kemudian silahkan masukan widget yang sobat ingin tampilkan di widget sticky_sidebar
• Jika berhasil maka widget sidebar akan muncul.

(Baca juga : Cara Membuat Widget Random Posts dengan Thumbnails di Blogger)

Silahkan sobat pahami langkah-langkah di atas, demikian tutorial dari saya mengenai 2 cara membuat sticky widget sidebar dengan CSS dan jQuery. Apabila ada pertanyaan mengenai cara pemasangannya, silahkan masukan ke dalam komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya mengenai cara pemasangannya silahkan tetap kunjungi blog Tutorial Umum.