Cara Membuat Sticky Widget Atau Widget Yang Tidak Bergerak Ketika Halaman Di-Scroll Ke Bawah

Cara Membuat Sticky Widget Atau Widget Yang Tidak Bergerak Ketika Halaman Di-Scroll Ke Bawah

BILKONET - Cara Membuat Sticky Widget. Apakah anda salah satu blogger yang menginginkan widget-widget tertentu di blog anda tetap diam meskipun blog di scroll ke bawah? Widget yang seperti itu disebut sticky widget. 

Terkadang kita memang perlu membuat widget atau menu tertentu agar tetap terlihat meskipun sudah di scroll ke bawah, BILKONET sendiri pun memakai sticky widget ini, anda bisa lihat widget menu di blog ini dan juga widget advertisement yang akan tetap terlihat meskipun anda sudah men-scroll halaman ke bawah.

Cara Membuat Sticky Widget Atau Widget Yang Tidak Bergerak Ketika Halaman Di-Scroll Ke Bawah

Yang saya tandai dengan tanda panah merah di atas adalah contoh sticky widget yang ada di BILKONET ini. Lalu bagaimana cara membuat widget tidak bergerak meskipun halaman sudah di-scroll kebawah ? Berikut adalah caranya:

Membuat Sticky Widget Alias Widget Yang Tetap Diam Ketika Discroll Ke Bawah.

1. Langsung aja ya tanpa basa-basi, copy aja nih script ini ke html tema blog anda dan letakkan atau paste dibawah kode </head>
<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#HTML1').length) { // Ganti "#HTML1" dengan ID widget milikmu
    var el = $('#HTML1');
    var stickyTop = $('#HTML1').offset().top;
    var stickyHeight = $('#HTML1').height();
    $(window).scroll(function() {
      var limit = $('#footer1').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer1"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 60 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Catatan:
Ganti yang saya tandai warna merah dengan ID widget milik anda yang ingin dibuat tidak bergerak ketika halaman discroll. Dan ganti yang saya tandai warna biru dengan ID widget pembatas kapan si Sticky Widget berhenti. Dalam kasus script di atas yang saya pakai, sticky widget akan berhenti ketika sudah bertemu dengan footer1.


2. Kemudian copy kode CSS ini dan letakkan atau paste di atas kode  ]]></b:skin>
.sticky {
  position:fixed;
  top:10px;
  z-index: 100;
}

Sudah, gitu aja. Mudah bukan? Silahkan cobain di blog anda. Hehe. Semoga artikel BILKONET tentang bagaimana cara membuat sticky widget ini bermanfaat untuk anda yaa.

Previous
Next Post »
Silahkan Tinggalkan Komentar Anda :