Cara Membuat widget sticky Di Blog

  Cara membuat widget Sticky di Blog

widget sticky adalah sebuah widget yang dimana ketika di scroll tidak akan ikut ke atas, widget ini akan tetap berada di tempatnya, jadi pas ketika di scroll widget yang di pasany script ini tidak akan kebawa ke atas. Ok untuk lebih jelasanya silahkan ikuti tutorial dari si tamvan teja sukmana ini :v

Cara Pertama Membuat widget Sticky di Blog

1.  Seperti biasa, agan harus masuk dulu ke Template > Edit HTML
2. Agan cari kode ]]></b:skin>
3. Masukan kode Css di bawah tepat di atas kode ]]></b:skin>
   

   
        .sticky {
   
         position:fixed;
   
         top:10px;
   
         z-index: 100;
   
       }

    <script type='text/javascript'>

    $(document).ready(function() {

    var stickyWidgetTop = $('#HTML1').offset().top;

    var stickyWidget = function(){

    var scrollTop = $(window).scrollTop();  

    if (scrollTop > stickyWidgetTop) {

        $('#HTML1').addClass('sticky');

    } else {

        $('#HTML1').removeClass('sticky');

    }

    };

    stickyWidget();

    $(window).scroll(function() {

        stickyWidget();

    });

    });

    </script>

Keterangan, Silahkan ganti HTML1 dengan nama widget sobat, kalo pupularpost ya tinggal tulis saja popularpost.

Cara Ke dua Membuat widget Sticky di Blog

1. Agan masuk tab Tataletak
2. Terus Tambahkan Widget>Html/Javascript
3. Lalu agan masukan script berikut.
   

   
       <style>
   
       .sticky {
   
         position:fixed;
   
         top:10px;
   
         z-index: 100;
   
       }
   
       </style>
   
       <script type='text/javascript'>
   
       $(document).ready(function() {
   
       var stickyWidgetTop = $('#HTML1').offset().top;
   
       var stickyWidget = function(){
   
       var scrollTop = $(window).scrollTop();
   
       if (scrollTop > stickyWidgetTop) {
   
           $('#HTML1').addClass('sticky');
   
       } else {
   
           $('#HTML1').removeClass('sticky');
   
       }
   
       };
   
       stickyWidget();
   
       $(window).scroll(function() {
   
           stickyWidget();
   
       });
   
       });
   
       </script>
   

Untuk Demonya, Silahkan Agan Liat Di Blog Percobaan