Cara Membuat Sticky Widget untuk Popular Posts Agar Melayang Saat di Tarik Kebawah -
Widget sticky adalah widget yang akan selalu tetap berada pada posisinya walaupun sudah di scroll kebawah. Widget dengan posisi sticky ini banyak digunakan oleh blogger dan biasanya diaplikasikan pada widget Popular Post pada blognya.

Gambar : Contoh Widget yang Menggunakan Widget Sticky

Widget Melayang

Maaf apabila dalam contoh gambar tersebut bukan widget popular post yang saya tunjukkan, karena memang saya saat menulis artikel ini saya hanya menggunakan fitur widget sticky untuk email suscribers saja

Okay.. Mari langsung saja kita menuju tutorialnya

Cara Membuat Widget Popular Posts Melayang ketika di Scrool

1.Silahkan Login Ke Blogger
2.kemudian klik Template > Edit HTML
3.ketik CTRL+F kemudian cari kata </body>
4.Kemudian masukkan kode html dibawah ini tepat di atasnya


<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { 
    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; 
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

  • #sticky-sidebar :Ganti dengan ID Widget populer post
Silahkan baca: Cara Mengetahui ID Widget Blog Dengan Mudah
  • #footer-wrapper : Tentukan ID untuk membatasi fungsi sticky

4.Jika sudah selesai silahkan di simpan

1 Komentar anda akan masuk moderasi!:

  1. nice banget infoya gan kebetulan ane juga newbie ^_^

    ReplyDelete

Komentar anda akan ditinjau terlebih dahulu oleh kami sebelum di publikasikan

 
Top