Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Blog


Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Blog

Banyak blogger yang saat ini menggunakan fitur sticky widget atau widget yang jika kita melakukan scrool ke bawah, maka widget tersebut akan mengikuti ke bawah juga. Biasanya widget ini terletak disidebar blog atau dibagian samping blog.

Lalu apa sih tujuan dari membuat widget mengikuti scroll atau sticky widget ini ?

Dengan menggunakan script sticky widget pada blog kita, widget yang dipilih akan terus tampil dilayar pengakses yang bertujuan agar widget tersebut selalu terlihat walaupun layar sedang discroll ke bawah dan menambah besar kemungkinan isi dari widget tersebut akan dibuka atau diklik oleh pengakses.

Biasanya, widget yang dipasang adalah widget yang berisi iklan, artikel populer ataupun daftar artikel terakhir.

Masih bingung sticky widget itu yang gimana? Sobat coba scroll ke bawah blog ini dan perhatikan pada bagian widget sidebar atau samping kanan. Widget paling bawah akan tetap terlihat dilayar dan mengikuti scroll ke bawah sesuai pergerakan mouse. Sudah paham ya sampai disini? OK.

Lalu bagaimana cara menerapkannya ? Simak langkah-langkahnya berikut ini.

Baca juga : Panduan Lengkap Blogger Blogspot Untuk Pemula

Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Blog

Sebelumnya sobat harus menentukan ID widget yang akan dijadikan sticky widget terlebih dahulu.

1. Buka Blogger > Edit Tata Letak > Pilih salah satu widget sidebar/yang paling bawah.
2. Setelah pop-up terbuka, cek dibagian akhir url link widget tersebut.
3. Catat IDnya untuk dijadikan sticky widget.
Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Blog
Sesuai gambar diatas, ID widget tersebut yaitu HTML10.
Untuk blog sobat, silahkan dicek terlebih dahulu sebelum ke langkah selanjutnya.

Selanjutnya ikuti langkah-langkah berikut ini.

1. Buka Blogger → Tema/Template → Edit HTML.
2. Tambahkan kode script 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>

Keterangan :
Ganti ID sticky-sidebar dengan ID widget yang dipilih.
Ganti ID footer-wrapper dengan ID widget bagian bawah sebagai titik berhentinya sticky widget.
Biasanya ID footer-wrapper sudah sesuai jadi tidak perlu dirubah.

3. Tentukan lebar sticky widget agar tampilannya tidak berantakan/melebar ketika discroll kebawah.

Terapkan kode dibawah ini tepat diatasnya kode ]]></b:skin>
/* CSS Sticky */
#sticky-sidebar{width:100%;max-width:320px}

Ganti sticky-sidebar dengan ID widget yang dipilih

Keterangan :
max-width:320px adalah nilai lebar widget yang dipilih, silahkan disesuaikan sendiri.


Sekian dulu artikel mengenai Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Blog.
Semoga berhasil dan bermanfaat.
Terimakasih

Dapatkan artikel Tutorial Blog & Optimasi Blog lainnya di Barungeblog.com


Loading...