Cara Membuat Menu di Blog Melayang Saat di Scroll

Cara Membuat Menu di Blog Melayang

Memiliki blog dengan tampilan yang keren merupakan idaman semua sebagian blogger, salah satu yang saat ini sedang banyak di bicarakan para blogger di group-group facebook ataupun forum blogger adalah template VioMagz. didalam pembicaraan tersebut banyak blogger yang memuji-muji template tersebut karena memiliki tampilan yang keren dengan fitur menu navigasi melayang. Nah pada kesempatan kali ini saya ingin sedikit berbagi informasi mengenai Cara Membuat Menu di Blog Melayang Ketika blog di Scroll kebawah.Cara Membuat Menu di Blog Melayang

Memang semenjak hadirnya template VioMagz, banyak sekali teman-teman blogger yang mengganti template blognya dengan template buatan mas sugeng tersebut. tak terkecuali blog yang saya miliki yaitu Cara aQbar. salah satu alasan kenapa saya ingin menggunakan template tersebut adalah karena template VioMagz memiliki tampilan menu yang sederhana namun tetap elegan ditambah lagi menu blog melayang saat di scroll.

Menu navigasi pada blog merupakan fitur penting untuk memudahkan visitor mengunjungi halaman lainya yang ada di blog kita. jika pengunjung sudah merasa dipermudah dengan fitur tersebut maka secara otomatis blog kita akan memiliki nilai SEO lebih dimata google, karena google pada dasarnya sangat suka dengan blog yang memudahkan pengunjungnya.

Cara Membuat Menu di Blog Melayang Saat di Scroll

Jika kamu tertarik untuk merubah menu navigasi blog kamu menjadi melayang. silahkan ikuti panduan Cara Membuat Menu di Blog Melayang Saat di Scroll dibawah ini.

Baca Juga: 

Hal pertama yang harus kamu lakukan untuk membuat menu navigasi melayang adalah membuka halaman dasboard blogger kamu, kemudian pilih menu tema lalu klik edit HTML.

Kemudian cari kode </head> untuk mempermudah pencarian kode tersebut, ketikan kombinasi tombol CTRL+F pada keyboard kamu lalu masukan kode </head> dan tekan enter.

Jika kode sudah kamu temukan letakan kode jQuery dibawah ini tepat dibawah kode </head>

<script async='' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>

Namun jika template yang kamu sudah terdapat script tersebut lewati langkah ini.

Cari lagi kode </body> kemudian letakan kode dibawah ini diatasnya.

<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>
Note: Ganti kode #header-navigation sesuai dengan ID atau CLASS pada template anda

Sebagai gambaran supaya kamu mudah menemukan ID atau CLASS, biasanya tampilan HTML pada menu memiliki bentuk struktur seperti kode dibawah ini, Nah ID itulah yang harus kamu masukan kedalam JavaScript.

<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>

Nah itulah panduan mudah Cara Membuat Menu di Blog Melayang Saat di Scroll, Oia sedikit informasi saja, bahwasanya nama ID atau Class yang saya contohkan diatas akan berbeda-beda dengan template yang kamu gunakan. oleh karena itulah kamu harus mengekspor templatenya supaya menemukan ID/CLASS yang akan kamu setting melayang.

Nilai Kualitas Konten

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *