Cara Membuat Sticky Widget di Sidebar Situs Blog


Membuat sticky widget di situs blog ternyata sangat mudah sekali, anda hanya perlu menambahkan beberapa kode CSS dan kode JavaScript, maka sticky widgetpun jadi.

Kali ini saya mau berbagi tutorial cara membuat sticky widget di sidebar blog. Fungsinya yaitu untuk membuat widget tertentu menjadi sticky atau melayang mengikuti halaman saat di scroll ke bawah atau ke atas.

Jadi keuntungannya, para pengunjung akan selalu melihat widget itu, walaupun sudah sampai pada batas akhir artikel. Untuk lebih jelasnya, mari kita membuat sticky widget dengan mudah untuk di tampilkan di situs blog anda

Cara Membuat Sticky Widget di Sidebar Blog


1. Login ke Akun Blog → pilih Tema

2. Klik Edit HTML

3. Copy paste kode di bawah ini dan letakan di atas kode </body>

<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>


Perhatikan kode yang ditandai, ganti kode tersebut dengan ID yang akan dibuat sticky sesuai template yang digunakan.


Catatan :

#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky


#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky


3. Tambahkan kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>

#sticky-sidebar{width:100%;max-width:300px}

Silahkan ganti 300px sesuai dengan lebar sidebar pada template yang sobat gunakan.

4. Simpan template

Share this

Related Posts

Previous
Next Post »