Home / Blog / 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

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.

Check Also

ou can use these best ping sites to index any URL very fast. Get the list pinging Thus, Google frequently indexes all the contents of Youtube ping tools, Best Ping Sites, Ping-O-Matic is a service to update different search engines that your blog has updated. Learn more, Ping-O-Matic vs. Pinglger vs. Pingoat, What Is Wordpress Ping and Could It Get You Traffic,

LIST OF BEST Free Ping Sites to Boost UP Indexing

Do you know why most of the link building efforts go in vain? – Just …

Leave a Reply

Your email address will not be published. Required fields are marked *