Cara Membuat Responsive Sticky Widget di Sidebar Blog

Widget adalah sesuatu hal yang banyak digunakan para blogger di templatenya, entah itu untuk tujuan memasang iklan, memasang widget artikel terbaru, widget komentar, ataupun jenis widget lainnya. Tujuannya adalah agar para pengguna merasa nyaman dan mendapatkan informasi yang lebih banyak dari blog kita.

Cara Membuat Responsive Sticky Widget di Blog

Biasanya ketika kita memasang widget lalu melakukan scroll ke bawah, widget tersebut akan tetap dalam posisinya. Nah sekarang bagaimana yang harus dilakukan agar widget tersebut tetap di posisinya (fixed)? Berikut akan kita bahas.

Untuk membuat widget tersebut tetap di posisinya, kita hanya perlu membuat sticky widget. Sebenarnya sudah banyak sekali tutorial yang tersebar untuk memasang widget ini, namun pada pemasangannya widget ini belum responsif. Ketika ukuran layar diperkecil, widget sticky ini akan menutupi halaman pembaca dan hal itu bertolak belakang dengan fungsi widget itu sendiri seperti yang saya sampaikan di pendahuluan.

Nah maka dari itu kita akan mengubahnya menjadi sticky widget yang responsive.

Berikut adalah salah satu script yang tersebar di internet, namun pada penggunaannya masih belum responsive.

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

Memang, saat di tampilan dekstop, widget ini berjalan sempurna. Namun kesalahan terjadi ketika ukuran layar browser diperkecil, widget akan menutupi halaman blog. Seperti gambar di bawah ini:

Mengapa bisa begitu? Dimana kesalahannya?

Hasil peninjauan saya dari kode tersebut, widget akan menjadi sticky (menambahkan css posision:fixed dan top:20px pada widget) hanya ketika letak widget kurang dari letak scroll pada halaman tersebut.

if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }

Nah ini yang menjadi permasalahan. Jadi ketika lebar layar browser diperkecil, halaman sticky tersebut akan muncul dan menghalangi halamannya. Seharusnya tidak begitu.

Nah untuk menjadikannya responsive, kita harus menambahkan satu kondisi lagi. Sehingga kondisinya menjadi:

Ketika letak widget kurang dari letak scroll pada halaman dan lebar layar lebih dari 759px, maka widget menjadi sticky.

Mengapa saya memilih 759px? Karena biasanya ketika lebar browser 759px, template blog akan otomatis menghilangkan/memindahkan bagian sidebarnya ke bawah.

Maka dari itu kita tambahkan satu variable lagi yang memuat nilai dari lebar browser

var lebar = $(window).width();

Lalu tambahkan ke kondisinya, sehingga menjadi:

if ((stickyTop < windowTop)&&(lebar > 759)) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }

Selesai, dan ini adalah kode sticky widget yang sudah responsive:

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

Nah jika ketika scroll, widget menjadi melebar dan menutupi sebagian halaman, maka tambahkan kode seperti ini dibagian cssnya:

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

Fungsinya untuk membatasi lebar ketika widget tersebut dalam keadaan sticky.

Kang penggunaannya gimana?

Ganti id widgetnya (#HTML202) dengan id widget yang ingin dijadikan sticky widget.

Ganti #footer dengan tempat berhentinya widget tersebut.

top: 20 adalah jarak berhentinya widget dengan tempat berhentinya widget.

max-width:260px adalah nilai lebar widgetnya.

Letakkan kode javascript di atas </body> untuk css diletakkan di <style>

Selesai deh, dengan ini kita telah membuat sticky widget yang responsive. Kode tersebut dipasang juga di blog saya untuk widget recent post (artikel terbaru).

Nah mungkin sekian dari saya dari cara membuat sticky widget responsive di blog, terimakasih telah mengunjungi blog saya, dan semoga bermanfaat.

Silakan untuk bertanya di kolom berkomentar.