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;

Menambahkan Kode CSS
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