Cara Membuat Sticky Widget di Sidebar Blog

12/23/2015
Pada artikel sebelumnya saya pernah berbagi tutorial tentang Memasang Fungsi Sticky Pada Widget Blogger, kali ini saya akan berbagi tutorial dengan fungsi yang sama yaitu untuk membuat widget tertentu menjadi sticky atau melayang mengikuti halaman saat digulirkan ke bawah dan atas. Tutorial ini merupakan perbaikan sekaligus menjawab komentar sobat dari tutorial sebelumnya yang ketika halaman digulir ke bawah sticky widget akan melewati Footer Wrapper dan itu akan sedikit mengganggu karena menghalangi widget yang dipasang di area Footer.

Kode yang akan saya bagikan ini lebih cocok dipasang pada semua konten di Sidebar atau bisa juga dipasang pada salah satu widget tertentu.Bagi sobat yang ingin mencobanya, silakan ikuti tutorial Cara Membuat Sticky Widget di Sidebar Blog.

Cara Membuat Sticky Widget di Sidebar Blog

Cara Membuat Sticky Widget di Sidebar Blog


1. Login ke Blogger > Buka Template editor > Tambahkan kode di bawah ini 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>

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

#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky

Selanjutnya tambahkan lebar pada konten atau widget yang dibuat sticky dengan CSS. Misalkan di sini saya memberikan 300px untuk lebar sticky, contoh :

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

Atau

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

Tentukan lebar sesuai dengan lebar sidebar dari template yang sobat gunakan dan juga jangan lupa untuk mengganti lebar pada media query tertentu, contoh :

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

Untuk demo tampilan Sticky Widget, silakan klik tombol di bawah ini :

Demo untuk sticky pada semua konten sidebar


Demo untuk sticky pada widget tertentu


Cukup mudah bukan? Selamat mencoba dan salam sukses.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 comments

mba eeeee, ini berat ga termasuknya?

Balas

ada ga cara buat sticky widget tanpa ngoprek template (body) dll, barangkali ada cara praktis yang langsung ditempel di widget itu sendiri?

Kunjungan balik ya --> Foredi Gel Rekomendasi boyke (pakar reproduksi se indonesia)

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.