Cara Membuat Widget Sticky pada Menu Navigasi Agar Menempel Saat Discroll - Hallo pembaca WHT
Web Hosting Indonesia, kali ini saya akan sharing hosting Cara Membuat Widget Sticky pada Menu Navigasi Agar Menempel Saat Discroll, saya telah mereview dan membuat tutorial untuk pembaca setia, berikut artikel yang kami buat khusus untuk anda pembaca WHT.
lihat juga
Cara Membuat Widget Sticky pada Menu Navigasi Agar Menempel Saat Discroll
Berkaca dengan blog-blog yang telah tenar dan menarik untuk dilihat karena terdapat sebagian widget blog mereka yang tetap menempel saat discroll. Hal ini membuat saya pun tertarik untuk membuat hal tersebut, setelah bertanya-tanya ke Paman Google akhirnya ketemulah jawabannya yaitu widget Sticky. Secara sederhana widget Sticky adalah widget yang tetap menempel di blog saat kursor komputer di gerakan kebawah. Contohnya bisa anda lihat pada blog saya yang sederhana ini. Widget sticky juga menurut saya berguna untuk membuat pengunjugn blog semakin banyak dan betah berlama-lama di blog kita sebab pengunjung akan dengan mudah dan terus melihat tampilan-tampilan menu navigasi pada blog kita.
Cara membuatnya juga cukup mudah :
1. Masuk ke Dashboard blog – Edit HTML – cari kode </Body> untuk mempermudah mencarinya tekan CTRL + F. Perhatikan gambar dibawah ini :
2. Copy kode berikut ini dan paste tepat di atas kode </Body> :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.nav').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
3. Sebelum disimpan jangan lupa ganti kode widget navigasi pada template anda, seperti kode navigasi pada blog saya di atas yaitu (‘.nav’)
