Cara Membuat Semua Widget Sidebar Sticky

Postingan ini terinspirasi dari website www.arlinadzgn.com tentang widget sticky di blogger dilink ini.

Secara penerapan sama persih dengan apa yang dijelaskan dipostingan tersebut. Tapi disini akan dimodifikasi sedikit agar semua widget dalam sidebar bisa sticky.

1. Login ke Blogger kemudian klik menu template editor

2 masukan kode berikut sebelum kode </body> :


<script type='text/javascript'>jQuery.ias();</script>
</b:if>
<b:include data='blog' name='google-analytics'/>
<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/ajaxsearch.js?live=true&amp;image=true'/>
<script>
//<![CDATA[
$(function() {
  if ($('#sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#sidebar');
    var stickyTop = $('#sidebar').offset().top;
    var stickyHeight = $('#sidebar').height();
    $(window).scroll(function() {
     var limit = $('#partner-foot').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
          var windowTop = $(window).scrollTop(); // returns number
var lebar = $(window).width();

if ((stickyTop < windowTop)&&(lebar > 759)){
             el.css({ position: 'fixed', top: 0 });
          }
          else {
             el.css('position','static');
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});
//]]>
</script>

#sidebar : ID dari konten atau widget yang akan dibuat sticky (sesuaikan dengan template anda)
#partner-foot : Batas Stop fungsi sticky (sesuaikan dengan template anda, biasanya juga menggunakan #footer-wrapper)

3. Masukan kode dibawah ini sebelum kode ]]></b:skin>

#sidebar{width:330px;max-width:330px;}

4. Kemudian save template

5 Selesai

Demikian Cara Membuat Semua Widget Sidebar Sticky di Blogger yang dapat saya tulis pada kesempatan kali ini, semoga bermanfaat.