Cara membuat widget Sticky di Blog

 Tkj di Kensasi > Cara membuat widget Sticky di Blog

Halo sobat, pada kesempatan kali ini saya selaku admin di sini akan memberikan script agar sebuah widget ketika di scrool tidak ikut ke bawa ke atas, tapi widget tersebut akan diam di situ. Jadiii Widget tersebut bisa terlihat terus walaupun agan scol sampai ke bawah.
Nah Bagi yang ingin mencobanya, silahkan Ikuti langkah demi langkah tutorial berikut dengan baik.

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;
   
       }

Setelah itu agan pasang lagi javascript berikut tepat diatas kode </body>

    <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>

Sebelum di save, agan harus merubah nama untuk widget yang ingin dibuat sticky.

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

Cara Pertama Sudah Selesai, Kalo ga mau ribet / cara di atas ga bisa. silahkan agan coba dengan cara yang ke 2 ini.

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>
   

Sebelum di save ingat gan, ganti dulu namanya ya, dengan nama widget agan ok (y)

Untuk Demonya, Silahkan Agan Liat Di Blog Percobaan 

Tag : #Daftar IsI, #Blogger, #Cara membuat widget Sticky di Blog.

Cukup sekian tutorial  dari Tkj di Kensasi Tentang Cara membuat widget Sticky di Blog, semoga bermanfaat. Script ini saya ambil dari web seocips.com.

Posted by Teja Sukmana

Tweet