Cara Yang Sangat Mudah Membuat Widget Sticky Di Blog

Contoh gambar. Sumber google.com

Widget Sticky atau widget yang selalu melekat di sidebar blog ketika sebuah halaman di scroll kebawah. Cara membuat widget seperti ini sangatlah mudah, Anda hany perlu menambahkan sebuah kode CSS dan kode script kedalam template Anda.

Jika Anda tertarik untuk memasang widget ini pada blog Anda, silahkan simak tutorial berikut ini :

1. Login ke blogger
2. Kemudian klik " Template " selanjutnya klik " Edit HTML "
3. Setelah itu cari kode ]]></b:skin> . Gunakan Ctrl + F agar lebih mudah
4. Setelah ketemu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

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

5. Selanjutnya cari kode </body>
6. Setelah ketemu, letakkan kode dibawah ini tepat di atas kode </body>

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

Keterangan :
Ganti tulisan #IDGADGET dengan ID Gadget yang Anda pilih

7. Klik " Simpan Template "

Copyright : http://panduanblogdanseo.blogspot.com/