Cara membuat menu melayang di blog ketika di scroll-Hallo sobat, pada kesempatan yang bahagia ini saya akan membagikan tutorial mudah buat sobat, rata-rata blog terkenal sekarang banyak menggunakan desain terbaru, seperti menu navigasi yang melayang, widget-wiget terbaru dan lain-lain.
Tetapi kali ini saya akan memberikan tips singkat cara membuat menu navigasi melayang pada blog sobat. Kalau sobat masih bingung gimana sih hasilnya, sobat bisa melihat hasil dari tips ini pada tombol demo di bawah ini.
Gimana keren kan sobat, menu di blog sobat jadi bisa melayang. Selain itu menu navigasi yang melayang [sticky] mempermudah pengunjung untuk mengakses blog sobat secara luas, jadi menu ini akan mengikuti jalannya scroll.
Cara Membuat Menu Navigasi Melayang di Blog
Langsung saja sobat berikut langkah-langkah membuat menu navigasi melayang di blog. Ikuti cara berikut ini.
- Masuk ke akun blogger sobat
- Kemudian cari menu Theme pada pilihan menu yang ada di dasboard blogger. Lalu pilih Edit Html.
- Setelah itu, cari kode </body>. Untuk mempermudah mencarinya tekan Ctr + F dan masukkan kode pada kolom pencarian tersebut
- Setelah sobat menemukan kode </body>. Lalu copy dan pastekan kode JavaScript dibawah ini tepat diatas kode </body>
... <script type="text/javascript">
//<![CDATA[
//Mas Tamvan | add Class on Scroll
function throttle(fn, delay) {
var last = undefined;
var timer = undefined;
return function () {
var now = +new Date();
if (last && now < last + delay) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn();
}, delay);
} else {
last = now;
fn();
}
};
}
function onScroll() {
if (window.pageYOffset) {
$$html.classList.add('is-active');
} else {
$$html.classList.remove('is-active');
}
}
var $$html = document.querySelector('.sticky'); //.sticky Ganti Dengan Class di Menu Kalian
window.addEventListener('scroll', throttle(onScroll,25));
//]]>
</script> ...Catatan:
Silahkan ganti kode .sticky dengan class HTML yang sesuai dengan menu sobat atau tidak ada classnya sobat bisa menambahkan class='sticky' di HTMLnya. - Selanjutnya, cari kode </head> dan copy kode CSS dibawah ini. Lalu pastekan tepat diatas kode </head>
... <style type='text/css'>
.sticky.is-active{
position:fixed;
top: 0;
left: 0;
width: 100%
}
</style> ...Catatan:
Jika sobat merubah tulisan .sticky pada JavaScriptnya, maka rubah juga tulisan .sticky pada CSS-nya - Jika sudah melakukan semua langkah diatas tadi, tinggal simpan template ✅ sobat dan lihat hasilnya.
Cukup sekian tutorial membuat menu navigasi melayang pada blog. Jika sobat masih kebingungan dalam penempatan kode diatas, sobat bisa menanyakan melalui kolom komentar.
