Cara Membuat Sticky Widget Pada Blog

Cara Membuat Sticky/Scroll Widget, Membuat Widget Mengikuti Kursor, Membuat Widget Mengikuti Scroll, Membuat Widget Iklan Mengikuti Scroll, Membuat Widget Iklan Mengikuti Scroll

Cara Membuat Sticky/Scroll Widget Pada Blog Hai Sobat! kali ini saya akan membahas cara membuat widget blog yang mengikuti scroll atau di sebut Sticky Widget.

Cara Membuat Sticky/Scroll Widget Pada Blog
1. Sigin ke Blogger > Tata Letak
2. Buat terlebih dahulu Widget yang ingin kamu jadikan Sticky. Agar lebih mudah sebaiknya widget itu di beri nama terlebih dahulu. Contoh: Ads
3. Kembali ke menu bloger kemudian pilih Template > Edit HTML
4. Cari kode widget dengan nama "Ads". Jika sudah ketemu, copy ID widget ke notepad
Contoh: <b:widget id='HTML2' locked='false' title='Ads' type='HTML' visible='true'>
4. Tambahkan kode di bawah ini sebelum </body>


<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID widget kamu
    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>

#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky

Jika kamu ingin mengatur sendiri ukuran widget kamu, tambahkan kode CSS ini ke blog kamu #HTML1{width:100%;max-width:300px}

Atau Jika kamu ingin mengatur sesuai dengan ukuran Template blog kamu
@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

Semoga Berhasil :)

Berbagi :