Cara Membuat Sticky Widget Responsive

Pada Kesempatan ini kami akan mejelaskan bagaimana Membuat Sticky Widget Responsive, ketika di tampilkan di versi dekstop maupun versi mobile.

Contoh pada di bawah widget info kesehatan tetap berada di tempat nya walaupun saya scroll ke bawah di karenaka artikel yang cukup panjang

Tujuan membuat sticky widget yaitu agar widget tersebut selalu tampil ketika halaman di scroll ke bawah. Namun jika blog Anda menggunakan footer, maka jangan sampai sticky widget ini melebihi footer agar tidak menjadi tumpang tindih antara widget dan footer.

Nah jika Anda memang tengah mencari cara membuat sticky widget yang berhenti di atas footer serta responsive, Anda bisa mencoba jquery di bawah ini, namun pastikan dulu Anda sudah memasang jquery library di blog Anda berapa pun versinya.

Bagi sobat yang ingin mencobanya silkan ikuti langkah langkah nya dibawah ini:

1. Login Blogger > Buka Template Editor HTML > tambahkan kode dibawah ini sebelum kode
</body>


<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#HTML2').length) { // Ganti "
#HTML2" dengan ID tertentu /id widget     var el = $('#HTML2');     var stickyTop = $('#HTML2').offset().top;     var stickyHeight = $('#HTML2').height();     $(window).scroll(function() {       var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer"       var windowTop = $(window).scrollTop();         var lebar = $(window).width();       if ((stickyTop < windowTop)&&(lebar > 759)) {         el.css({           position: 'fixed',           top: 10 // Jarak atau margin sticky dari atas         });       } else {         el.css('position', 'static');       }       if (limit < windowTop) {         var diff = limit - windowTop;         el.css({           top: diff         });       }     });  } }); //]]> </script>

Ganti kode yang di beri tanda merah, sesuaikan dengan id widget anda

2. Tambahkan Kode di bawah ini sebelum kode ]]></b:skin>


#HTML2{width:100%px;max-width:285px;margin:0;}
@media only screen and (max-width:1000px){
#HTML2{width:100%;max-width:100%}
}

Perhatikan kode yang diberi tanda merah.
285px = sesuaikan dengan lebar widget anda
1000px = sesuaikan dengan lebar template blog anda

3. Save Template

Nah itulah Cara Membuat Sticky Widget Responsive di versi dekstop maupun versi mobile,

pada kasus yang saya alami kode ini cocok di template saya,

kode ini saya ambil dari arlinadzgn namun ada beberapa yang saya rubah karena awal nya kode tersebut tidak resposive di versi mobile.

Nah bagi anda yang belum berhasil untuk membuat Sticky widget silakan dicoba memakai kode ini. Semoga bermanfaat.