Cara Membuat Sticky Widget Di Sidebar Blogger

Optimasi pada tampilan blog adalah salah satu trik untuk memikat visitor, dengan kemudahan navigasi, tampilan blog yang elegant dan sidebar yang rapi membuat visitor merasa "nyaman" berkunjung di blog kita. Nah, pada artikel ini saya akan membagikan cara membuat sticky widget pada sidebar blog. Apa itu sticky widget? Sticky adalah efek yang dihasilkan oleh code css dan javascript sehingga membuat tampilan melayang pada sidebar widget, dengan sticky widget akan akan tetap pada posisinya meskipun halaman sedang di scroll (diarahkan) ke bawah.

Kode script yang akan saya bagikan ini adalah milik mbak arlina, saya hanya membagikan kode scriptnya saja. Fungsi ini juga dapat anda terapkan untuk berbagai jenis widget seperti popular post, arsip, html widget, dll. Nah, jadi bagi anda yang ingin memasang efek sticky pada sidebar blog anda, anda bisa mengikuti tutorial di bawah ini:

Demo Sticky

Login ke blogger lalu masuk pada menu template > edit html. Lalu copy kode javascript di bawah ini dan pastekan tepat sebelum </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>

Ganti kode yang di tandai dengan warna merah dan biru di atas dengan kode anda. Kode yang berwarna merah adalah kode id widget anda sedangkan yang berwarna biru adalah kode footer atau batas untuk halaman paling bawah blog anda.

Selanjutnya tambahkan kode css di bawah ini pada blog anda, letakkan kode tersebut tepat di atas ]]></b:skin> atau <style>

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

atau gunakan css di bawah untuk menentukan widget pada query tertentu:

@media only screen and (max-width:768px)
{
#sticky-sidebar {width:100%;max-width:100%}
}

Catatan:

- Jangan lupa mengganti id widget anda pada kode javascript
- Sesuaikan #footer-wrapper dengan id widget yang berada paling bawah blog anda
- Jangan lupa ganti id widget pada css, sesuaikan dengan kode javascript

Itulah tips tentang "Cara Membuat Sticky Widget Di Sidebar Blogger", untuk blog erislabs ini tidak saya aktifkan mode sticky pada widgetnya lagi karena blog ini sudah support untuk mobile, jika sticky saya aktifkan maka akan merubah susunan widget pada template mobile. Semoga cara ini dapat membantu anda, selamat mempraktekkan dan semoga berhasil. Terima kasih.

Subscribe to receive free email updates: