Kali ini saya akan berbagi tutorial cara Membuat Menu atau Header Melayang (sticky) saat discroll di Blogger dan cara mengatasi menu atau header yang tidak melayang (sticky) setelah memasang script sticky menu.
Caranya cukup mudah sobat hanya memasang satu kode jQuery dan mengganti id class-nya., lalu simpan dan lihat hasilnya.
Bagi yang tertarik dan ingin mencobanya, silahkan lakukan tutorial dibawah ini.
Cara Membuat Menu Melayang (Sticky) Saat Discroll Di Blogger
Buka Blogger sobat lalu buka menu Tema, setelah itu Edit HTML.
Setelah itu cari kode </body>, lebih mudahnya untuk mencari kode tersebut tekan CTRL + F.
Selanjutnya Tambahkan kode dibawah ini sebelum kode yang kita cari diatas.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('#nav-wrapper').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#nav-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#nav-wrapper').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>Ganti kode #nav-wrapper dengan id Menu atau Header blog sobat.
Setelah itu Simpan Tema, dan lihat Hasilnya.
Cara Mengatasi Menu Yang Tidak Melayang Atau Sticky
Jika menu tidak melayang setelah memasang script di atas atau script sticky yang lainya, silahkan ikuti cara dibawah ini :
Tambahkan Kode dibawah ini sebelum tag pembuka dan sesudah tag penutup HTML menu sobat.
<div id='sticky-menu'>
/* HTML Menu Blog Sobat */
</div>
Penempatan kode diatas seperti dibawah ini :
<div id='sticky-menu'>
/* Tag Pembuka HTML Menu Blog Sobat */
<div id='menu-nav' class='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/menu1'>Menu1</a></li>
<li><a href='/menu2'>Menu2</a></li>
<li><a href='/menu3'>Menu3</a></li>
<li><a href='/menu4'>Menu4</a></li>
</ul>
</div>
/* Tag Penutup HTML Menu Blog Sobat */
</div>Setelah itu cari kode </style> atau ]]></b:skin>, lebih mudahnya untuk mencari kode tersebut tekan CTRL + F.
Tambahkan Kode CSS dibawah ini sebelum kode yang kita cari di atas.
#sticky-menu{
position:fixed;
top: 0;
left: 0;
width: 100%
}Selanjutnya ganti id pada script jQuery atau JavaScript sticky menu, jika sobat menggunakan kode jQuery yang saya berikan, maka hasilnya seperti dibawah ini :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('#sticky-menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#sticky-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#sticky-menu').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>Simpan dan Lihat hasilnya.
Sekian tutorial cara Membuat Menu atau Header Melayang (sticky) saat discroll di Blogger, selamat mencoba.
