Sabtu, 29 Oktober 2016

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

Cara Membuat Responsive Sticky Widget di Sidebar 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:
Cara Membuat Responsive Sticky Widget di Sidebar Blog
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.

Orang biasa yang senang belajar. Senang ngoprek dan menulis sesuatu yang berbau teknologi, desain grafis, dan hal random lainnya.

15 komentar

  1. maksudnya footer itu apa ya? apakah id widget paling bawah?

    BalasHapus
    Balasan
    1. lebih tepatnya tempat berkumpulnya widget widget paling bawah :D
      [img]https://3.bp.blogspot.com/--KNnszFTCCE/V-sfCo6FHcI/AAAAAAAAEFo/h95_EYmtJcoEayBMcqODKprj5h_N2qOHgCLcB/s320/layout%2Bblog.jpg[/img]
      kalau digambar tersebut namanya footer-wrapper

      Hapus
    2. akhirnya bisa juga. dari sekian script yang bertebaran di luar sana, sementara ini yang terbaik. Ya karena sudah dijelaskan sebelumnya, sudah diperbaiki ketika resolusi tampilan diperkecil.

      Sepertinya "max-width:260px" dapat digantisesuai dengan ukuran pada template (widget).

      Makasih ya....

      Hapus
    3. yaps betul sekali, max-width:260px bisa disusaikan dengan ukuran template masing-masing..

      oke sama-sama gan..

      Hapus
  2. mau nanya mas, dimana saya harus menempatkan kode css ketika widget menjadi lebar saat sticky

    BalasHapus
    Balasan
    1. di widget juga bisa gan, atau di edit html juga bisa.. tinggal dipilih saja..

      Hapus
    2. thanks gan, saya asal asalan memasukkan css nya di css lain akhirnya berhasil juga hehe

      Hapus
  3. kok sulit ya di terapkan di template saya kang..

    trims,

    http://liburanboongan.com

    BalasHapus
  4. Work. Terima kasih pak. tapi ketika link di klik akan membuka di tab baru bukan di recent. Bisa ngga supaya bisa buka di recent

    BalasHapus
  5. Terimakasih atas tambahan kodenya, mungkin hal semacam ini dialami bagi yang ingin meng-sticky kan widget.

    BalasHapus
  6. terima kasih banyak atas tutorialnya gan... sangat bermanfaat sekali..... saya akan bantu sharing website agan...

    BalasHapus

Silakan Berkomentar