Cara Membuat Sticky Widget pada Sidebar Blog 100% WORK

Cara Membuat Responsive Sticky Widget di Sidebar Blog - Sticky widget adalah sebuah widget yang akan mengikuti jika di scroll atau widget yang melayang mengikuti halaman yang digulirkan ke atas dan ke bawah. Pada sticky widget ini bisa berhenti pada footer (bisa ditentukan sendiri tempat berhentinya) dan tidak menggangu pada tampilan ponsel. Sobat bisa lihat gambar di atas, seperti itulah Sticky widgetnya.

Sebenarnya di luar sana banyak sekali tutorial membuat sticky widegt, tapi banyak yang tidak responsive, mengganggu pada tampilan ponsel, dll. Saya sendiri sudah mencari yang terbaik dan akhirnya ketemu kemudian saya bagikan di posting ini.

Oke jika sobat penasaran, langsung saja ke tutorial pemasangannya:

1. Pergi ke Blogger.
2. Masuk ke menu Template.
3. Pilih Edit HTML.
4. Copy code di bawah ini dan paste di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#PopularPosts2').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#PopularPosts2');
    var stickyTop = $('#PopularPosts2').offset().top;
    var stickyHeight = $('#PopularPosts2').height();
    $(window).scroll(function() {
      var limit = $('#subscribe-css').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer"
      var windowTop = $(window).scrollTop();
        var lebar = $(window).width();
      if ((stickyTop < windowTop)&&(lebar > 759)) {
        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>

5. Perhatikan code tersebut, ganti kode yang ditandai dengan ID yang akan dibuat sticky.
• #PopularPosts2 : ID widget / konten yang akan dibuat sticky
• #subscribe-css : ID widget / konten untuk membatasi fungsi sticky
6. Kemudian tambahkan kode CSS berikut yang berfugsi untuk membatasi lebar widget tersebut saat keadaan sticky. Copy kode dibawah ini dan paste di atas </style> atau ]]></b:skin>

#PopularPosts2{width:100%;max-width:300px}
]]>

7. Ganti #PopularPosts2 dengan ID widget / konten yang dibuat sticky. Kalian bisa atur nilai lebarnya pada max-width:300px.
8. Simpan template dan lihat hasilnya.

Bagaimana? Apakah sobat berhasil mencobanya? Jika masih belum berhasil silakan coba lagi dan diteliti lagi. Jika waktu kalian paste kode CSSnya di atas </style> tetapi tidak bisa, coba kalian paste kode CSSnya di atas kode ]]></b:skin> . 

Saya kira cukup sampai di sini saja posting tentang Cara Membuat Sticky Widget pada Sidebar Blog. Terima kasih sudah berkunjung dan semoga ini bermanfaat bagi sobat semua.