Membuat Sticky Widget Pada Blog

Sticky widget adalah beberapa widget social media yang akan selalu bergerak walaupun halaman sedang di scroll dibawah. Nah, kali ini saya akan membagikan Cara Membuat Sticky Widget Pada Blog, Jika anda tertarik untuk memasangnya simak artikel berikut ini.

Halo semuanya, setelah sebelumnya saya telah menshare Cara Membuat Quote Box pada Blog, kali ini saya akan membagikan Cara Membuat Sticky Widget Pada Blog. Sebelum kita ke caranya, lebih baik kita mengerti dahulu apa itu sticky widget.

Sticky dalam arti bahasa Indonesia artinya lengket. Jadi, Sticky widget bisa dikatakan adalah widget yang akan selalu lengket atau menempel walaupun halaman blog akan atau sedang di scroll ke bawah. Nah, berikut Cara Membuat Sticky Widget Pada Blog.

1. Login ke Blogger lalu pergi ke Dashboard blog,


2. lalu Pergi ke Template lalu Edit HTML,


3. Lalu tambahkan kode CSS berikut ini di atas ]]></b:skin>,


   
   
   
   

   
   

   .sticky {
     position:fixed;
     top:10px;/* jarak dari atas*/
     z-index: 100;
   }

   
   

   
   
   
   


4. Setelah itu, tambahkan juga kode berikut diatas </body>


   
   
   
   

   
   

   <script type='text/javascript'>
   $(document).ready(function() {
   var stickyWidgetTop = $('HTML7').offset().top; 
   var stickyWidget = function(){
   var scrollTop = $(window).scrollTop();     
   if (scrollTop > stickyWidgetTop) { 
       $('HTML7').addClass('sticky');
   } else {
       $('HTML7').removeClass('sticky'); 
   }
   };
   stickyWidget();
   $(window).scroll(function() {
       stickyWidget();
   });
   });
   </script>

   
   

   
   
   
   
   
   Keterangan : Ganti HTML7 dengan Id Widget yang ingin dipasang.

Cara Melihat ID Widget :

1. Buka Menu Tata Letak,


2. Lalu tambahkan widget yang ingin anda jadikan Sticky Widget,


3. Pada tab tambah widget lihat gambar berikut ini.

Itulah Bagaimana Membuat Sticky Widget Pada Blog. Jika cara yang tidak bisa silahkan komentar. Semoga berhasil memasang sticky widget :D