Memasang Fungsi Sticky Pada Widget Blogger

Memasang Fungsi Sticky Pada Widget Blogger - Oke, pada kesempatan kali ini Darul Sahaja akan berbagi tips tentang cara memasang fungsi sticky pada widget blogger, fungsi dari sticky pada widget ini berguna bagi sobat yang menginginkan sebuah widget pada blog agar bisa melayang mengikuti halaman saat digulirkan ke bawah dan akan kembali ke posisi semula saat halaman digulirkan ke atas.

Kita langsung saja ke cara penerapannya :

CARA 1

1. Buka Blogger > Klik Template > Edit HTML > Salin dan terapkan kode di bawah ini tepat sebelum </body>

Sebagai contoh widget yang akan dibuat sticky adalah widget dengan ID #HTML1

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML1");
//]]>
</script>

Tentukan ID widget pada kode yang ditandai.

2. Selanjutnya simpan kode di bawah ini sebelum ]]></b:skin> atau </style>

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML1 .widget-content {padding:0;margin:auto;}

Silakan atur kode di atas sesuai selera.

3. Simpan template dan lihat hasilnya.

CARA 2
1. Atau bisa juga menggunakan kode ini, sebagai contoh widget yang akan dibuat sticky adalah widget dengan ID #sidecontent

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
$(function() {
  var top = $('#sidecontent').offset().top - parseFloat($('#sidecontent').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

  var maxY = footTop - $('#sidecontent').outerHeight();

  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
        $('#sidecontent').addClass('fixed').removeAttr('style');
      } else {
        $('#sidecontent').removeClass('fixed').css({
          position: 'absolute',
          top: (maxY - top) + 'px'
        });
      }
    } else {
      $('#sidecontent').removeClass('fixed');
    }
  });
});
//]]>
</script>

Tentukan ID widget pada kode yang ditandai.

2. Simpan kode di bawah ini sebelum ]]></b:skin> atau </style>

#sidecontent {
  width: 255px;
  height: 200px;
  margin: auto;
  background: #fc4f3f;
  position: absolute;
}
#sidecontent.fixed {
  position: fixed;
  top: 20px;
}

Tambahkan atribut position: absolute; pada widget dan atur posisi widget saat halaman digulirkan top: 20px;

3. Simpan template dan lihat hasilnya.

Pada widget

RESULT

Pada menu horizontal

RESULT

Pada widget dan menu horizontal

RESULT

Untuk menonaktifkan fungsi sticky pada media query tertentu

#sidecontent@media only screen and (max-width:640px){
.makesticking{position:relative!important;z-index:initial}}

Penggunaan sticky ini bisa sobat pasang di widget atau konten apa saja sesuai kebutuhan.

Tambahan :

Penerapan fungsi sticky pada menu horizontal hanya dengan CSS

4. Tentukan class atau ID pada kode di bawah ini sesuai template yang sobat pakai

.arlinatop-wrapper{width:100%;max-width:970px;background:rgba(255,255,255,.98);z-index:99;position:fixed;overflow:hidden;margin:auto;border-bottom:1px solid #e6e6e6;-webkit-transform:translateZ(0)}

Cukup sekian mengenai cara Memasang Fungsi Sticky Pada Widget Blogger, selamat mencoba.