Membuat Sticky Pada Widget Di Sidebar Blog Ala Kang Ismet

Membuat Sticky Pada Widget Di Sidebar Blog Ala Kang Ismet - Setelah berkunjung ke blognya +Kang Ismet , saya menjumpai artikel dengan judul seperti yang saya share kali ini,, lebih enaknya saya share ulang ilmu dia ( +Kang Ismet  ) lah.. hehee.... maaf-maaf nih kang.

Nah untuk penjelasan dari kata "sticky" yaitu artinya menempel, sedangkan "sticky pada sidebar" dapat diartikan widget yang ada di bagian sidebar akan terlihat atau tampak mengikuti mouse saat layar di scroll dan alangkah bagusnya widget yang di buat Sticky adalah yang berada di bagian paling bawah. Untuk contoh silahkan liat  Halaman Facebook di sidebar dan scroll ke bawah,, pasti akan slalu setia mengikuti anda,, wkwkwkkk.......


Dalam pembuatanya ada dua langkah yang harus di lakukan;

1. Menambahkan Kode CSS
2. Menambahkan Kode JavaScript

1. Menambahkan Kode CSS

• Masuk dulu ke akun blogger
• Klik template => Edit HTML
• Copy kode css dibawah ini lalu pastekan di atas kode ]]></b:skin> ( gunakan Ctrl+F )

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

 Jangan beranjak dulu dari HTML kamu,, masih ada satu lagi yang harus di tambahkan, yaitu ;

2. Menambahkan Kode JavaScript

• Copi Pastekan kkode di bawah DI ATAS kode </body> ( gunakan Ctrl+F )

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

Ganti tuh  #HTML2  dengan ID widget kesukaanmu. Lalu simpan templatenya.

Beres sudah deh,,, tanpa mengurangi rasa hormat dan kagum saya sama +Kang Ismet karena ini bersumber dari sana.

Sumber : Blog Kang Ismet

Author : Prayit

Blog sederhana ini hanya untuk tempat berbagi,. Maaf buat yang merasa terganggu dengan adanya blog ini.

Share this

Related Posts