Cara Membuat Widget Mengikuti Scroll atau Sticky pada Blog

By | Januari 24, 2017
Cara Membuat Widget Mengikuti Scroll atau Sticky pada Blog
Judul Arikel yang akan aku bahas yaitu Cara Membuat Widget Mengikuti Scrool pada Blog, Sebelumnya kita pengenalan dulu, ada yang pernah dengar apa itu sticky note? sticky note yaitu kertas yang biasanya digunakan sebagai pengingat kemudian ditempel ditempat-tempat yang paling sering dikunjungi. Sticky note pada dasarnya sama dengan Fungsi yang ada pada sticky widget, yaitu juga sebagai pengingat. Seperti yang saya katakan tadi, Sticky ditempelkan ditempat-tempat yang sering dikunjungi, maka dari itu, Widget pada blog juga perlu ditempelkan ditempat tertentu, dengan cara membuat widgetnya mengikuti scroll/penggulung layar. Sehingga apabila pembaca menggulirkan layar kebawah, maka widgetnya akan mengikuti penggulir layar kebawah.
Masih bingung juga, Apa fungsi sticky widget? kamu bisa lihat pada blog saya, yaitu Widget Recent Posts, yang terletak dibagian kiri blog saya, kira-kira seperti itulah fungsi Sticky Widget. Coba deh, anda gerakkan scroll/penggulung layar kebawah, maka secara otomatis, Widget Recent Posts akan mengikuti scroll. Fungsi ini, sangat penting untuk meningkatkan traffik blog kamu, dengan adanya widget ini, pembaca dapat melihat artikel-artikel yang ada pada blog kamu.
Kalo udah paham! Mari kita bahas pelan-pelan langkahnya, 

1. Menemukan ID Widgetnya

Langkah pertama yang harus anda lakukan ialah, anda harus menemukan ID Widget anda. Apa itu ID Widget? ID widget adalah identitas widget blog yang tercantum dalam template blog, biasanya diberi nama "HTML1, PopularPosts2, Blog1". Untuk lebih jelasnya simak artikel berikut ini

Cara Mengetahui ID Widget Pada Blog

Kalo udah paham, lanjut deh ke langkah berikutnya

2. Memasang Kode HTML

1. Buka Blogger, Pilih Template > Edit HTML
2. Tambahkan Kode dibawah ini sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    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; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        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>

Ganti sticky-sidebar dengan ID Widget yang ingin kamu buat Sticky.
Ganti footer-wrapper dengan ID Widget bagian bawah blog kamu.

Mengganti Sticky sidebar dengan ID Widget kamu berfungsi untuk membuat siwidget menjadi sticky, sedang mengganti footer wrapper untuk membuat Widget yang di sticky berhenti sebelum widget yang dijadikan sebagai tempat pemberhentian si sticky widget, jadi tidak menghalau widget lainnya saat discrool, jadi pada saat sticky widget sampai pada

3. Menambahkan lebar Widget

Mengapa perlu menambahkan lebar widget, hal ini berfungsi untuk membuat Sticky widget tidak melebar pada saat di scroll. Caranya masih sama yaitu buka blogger > Template, lalu Edit HTML

#sticky-sidebar{width:100%;max-width:300px}

Ganti sticky-sidebar dengan ID Widget yang ingin kamu buat Sticky.

Demikian Artikel aku tentang Cara Membuat Widget Mengikuti Scroll atau Stciky pada Blog, semoga bermanfaant. Sumber: Arlinadzgn.com

loading...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *