Membuat Widget Mengikuti Scroll atau Sticky Widget pada Sidebar Blog

Sticky Widget Blogger

Banyak dijumpai pada tampilan sebuah blog pada bagian samping atau sidebar blog akan turun ataupun naik mengikuti arah scroll mouse. Fitur ini disebut dengan sticky widget blogger.

Sticky widget blogger biasanya digunakan pada widget sidebar atau bagian samping. Selain itu, biassanya pada bagian header blog juga diterapkan fitur ini sehingga menjadi sticky header.

Fitur sticky widget ini bertujuan agar widget tertentu selalu bisa terlihat mengikuti arah scroll naik atau turun sehingga menambah besar kemungkinan isi dari widget tersebut akan dibuka atau diklik oleh pengunjung.

Widget yang sering dijadikan sticky biasanya berupa iklan, artikel terbaru, artikel populer dan sebagainya.

Jika sobat masih bingung dengan sticky widget, silahkan coba scroll halaman blog ini ke bawah dan perhatikan pada bagian sidebar. Ada widget yang mengikuti pergerakan arah mouse. Nah, itulah yang disebut dengan sticky widget blogger. Sampai disini sudah paham ya? Lanjut!

Baca Juga : Cara Memasang Widget Kotak Iklan di Blog

Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Sidebar Blog

Sebelumnya tenentukan ID widget yang akan dijadikan sticky widget.
  • Masuk ke Dashbord Blogger
  • Pilih menu Tata Letak
  • Pilih widget yang ingin dijadikan sticky (Biasanya widget sidebar paling bawah)
  • Catat ID widget tersebut
Sticky Widget Blogger - ID Widget
Keterangan:
Pada gambar diatas, ID widgetnya yaitu HTML3

Selanjutnya ikuti langkah-langkah berikut!
  • Masuk ke Dashbord Blogger
  • Pilih menu Tema/Template - Edit HTML
  • Cari kode </body> (Biar lebih cepat pakai Ctrl + F)
  • Letakkan kode berikut tepat di atasnya
<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>

Keterangan :
  • Ganti ID sticky-sidebar dengan ID widget yang dipilih
  • Ganti ID footer-wrapper dengan ID widget bagian bawah sebagai titik berhenti
  • Biasanya ID footer-wrapper sudah sesuai jadi tidak perlu dirubah
Selanjutnya, tentukan lebar sticky widget agar tampilannya tidak berantakan/melebar ketika discroll.

Terapkan kode dibawah ini tepat diatasnya kode ]]></b:skin>

/* CSS Sticky */
#sticky-sidebar{width:100%;max-width:320px}

Keterangan :
  • Ganti sticky-sidebar dengan ID widget yang dipilih
  • max-width:320px adalah nilai lebar widget, silahkan disesuaikan
  • Simpan dan lihat hasilnya.

Sekian ulasan mengenai Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Sidebar Blog.
Terima kasih.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Membuat Widget Mengikuti Scroll atau Sticky Widget pada Sidebar Blog"

Posting Komentar

Tinggalkan komentar di Barungeblog yuk!

• Berkomentar dengan sopan
• Tidak memasukkan link aktif (Spam)
• Berkomentar yang relevan sesuai artikel
• Komentar yang kasar dan mengandung unsur SARA akan dihapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel