Cara Membuat Menu Blog Melayang Ketika di Scroll - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Menu Blog Melayang Ketika di Scroll

Pilihan Editor :

Cara Membuat Menu Blog Melayang Ketika di Scroll
Penulis Bagus Surochman
0
Modus malam



Cara Membuat Menu Blog Melayang Ketika di Scroll

KURAZONE ~ Semenjak hadirnya template Viomagz, banyak sekali kalangan Blogger yang mengganti template nya, salah satu yang menarik dari template tersebut adalah tampilan menu nya yang sederhana dan elegan, ditambah lagi bisa melayang ketika halaman blog di scroll kebawah. Meskipun tidak semua Blogger menggunakan template tersebut, tetap saja - melayangnya menu tersebut menarik perhatian dan banyak yang mencoba untuk menerapkannya.

Pada kesempatan kali ini kita akan mempelajari bagaimana cara membuat menu blog menjadi melayang ketika halaman blog di scroll.

Cara Membuat Menu Blog Melayang Ketika di Scroll

1. Buka akun Blogger
2. Pilih Menu Tema
3. Masukkan kode dibawah ini kedalam template, taruh diatas kode </head>
<script async='' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
Abaikan kode diatas jika template kalian sudah terdapat kode tersebut.

4. Masukkan kode dibawah ini kedalam template, taruh diatas kode </body>
<script type='text/javascript'>
$(document).ready(function() {
var stickyNavTop = $('#header-navigation').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#header-navigation').css({ 'position': 'fixed', 'top':0, 'z-index':9999, 'width':'100%' });
} else {
$('#header-navigation').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
5. Ganti kode #header-navigation sesuai dengan ID atau CLASS pada template anda.

Sebagai gambaran saja, bahwa tampilan HTML pada menu - memiliki bentuk struktur seperti dibawah ini : (nah - ID tersebutlah yang harus dimasukkan kedalam JavaScriptnya)
<nav id='header-menu'>
<ul>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
</nav>

*nama ID atau CLASS yang dicontohkan mungkin akan berbeda-beda dengan template yang kalian gunakan, untuk itulah kalian perlu mengeksplor template nya agar menemukan ID/CLASS Menu yang akan disetting Melayang.

Itulah informasi mengenai "Cara Membuat Menu Blog Melayang Ketika di Scroll", selamat mencoba dan semoga bermanfaat. Goodluck !!
nanio
Cara Membuat Menu Blog Melayang Ketika di Scroll
Cara Membuat Menu Blog Melayang Ketika di Scroll Cara Membuat Menu Blog Melayang Ketika di Scroll Reviewed by Bagus Surochman on 7/01/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.