Membuat Sticky Widget Melayang Dan Berhenti Di Atas Footer Blog

Membuat Sticky Widget Melayang Dan Berhenti Di Atas Footer Blog - Sticky Widget atau widget melayang di sidebar blog merupakan hasil dari kombinasi javascript, tujuannya adalah agar widget yang sudah ditambahkan script agar melayang (sticky) di sidebar blog.

Jadi ketika kita menscroll atau menggulung halaman blog kita ke bawah, widget tersebut tetap mengikutinya dan tidak tertutup karena sudah dibuat sticky, dan widget ini akan berhenti sticky pada saat posisinya sudah berada di atas Footer blog, karena sudah disetting sebelumnya di dalam javascript tadi bahwa widget ini akan berhenti di atas id footer blog.

Langsung saja disimak cara membuat sticky widget melayang di blog.

Membuat Sticky Widget Dan Berhenti Di Atas Footer

Pertama silahkan sobat menuju kehalaman Blogger > Template Edit HTML
Lalu cari kode </body> dan letakkan kode di bawah ini tepat di atas kode </body>

<script>
//<![CDATA[
$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

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

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

#stiky adalah ID yang sobat gunakan untuk membuat widgetnya menjadi sticky, contoh widget di sidebar idnya HTML3, maka sobat ganti #sticky menjadi #HTML3

Untuk mengatur jarak antara widget dengan batas atas blog, atur angka top pada kode
el.css({ position: 'fixed', top: 0 });

Jika sobat ingin memberikan perlakuan khusus pada widget sticky seperti mengganti background, menambah style css, dll, sobat bisa menggunakan kode dibawah ini

<script>
//<![CDATA[
$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number
          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
             el.addClass("intro");
          }
          else {
             el.css('position','static');
             el.removeClass("intro");
          }

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

Kemudian CSSnya seperti ini

.intro {
   ..................
   ..................
   ..................
}

Langkah terakhir klik Simpan Template dan lihat perubahannya di blog sobat, selamat mencoba dan semoga berhasil.

Referensi : http://www.kompiajaib.com/2016/09/membuat-sticky-widget-dan-berhenti-di.html