Cara Membuat Navigasi Menu Melayang di Template Google SEO

NAVIGASI Menu melayang (floating menu, static menu, fix menu) adalah menu navigasi yang tetap muncul atau tidak hilang saat halaman di-scroll. 

Contohnya di blog CB Blogger atau di Blog Demo Google SEO ini.

Bagi pengguna template Google SEO, silakan pasang kode berikut ini untuk menjadikan navigasi menu utama tetap muncul saat di-scroll. 

Keuntungan atau fungsi static menu atau floating menu ini adalah memudahkan user membuka link menu.

Cara Membuat Navigasi Menu Melayang di Template Google SEO

Cara memasangnya sebagai berikut:

1. Klik "Template" > "Edit HTML"
2. Cari (CTRL+F) kode </body>  --ada adi bagian paling bawah, sebelum kode </HTML>
3. Copy kode berikut ini dan Paste di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('#menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#menu').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>

4. Tambahkan kode lebar menu agar ukuran menunya sesuai dengan lebar halaman blog.

Cari (Ctrl+F) kode #menu sebagai berikut:

#menu {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF4vx0OMGIZhTaONXDkfYzuA2YFM9LQpAB15LFMy-2NcOEm4Qmalz4pSpNAVGHqiTBvektFH5lwq6DxAXRcQmtChO11EZXHiyg-AbqGaz784XLylrGjYHpLwbDXcq-VHMl0uzOGve7OFoL/s1600/menuse.jpg);
color: #eee;
height: 35px;
border-bottom: 4px solid #666;
}

Tambahkan dua kode lebar menu berikut ini sebelum kode penutup:

width: 100%;
max-width: 960px;

SEHINGGA hasilnya seperti berikut ini:

#menu {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF4vx0OMGIZhTaONXDkfYzuA2YFM9LQpAB15LFMy-2NcOEm4Qmalz4pSpNAVGHqiTBvektFH5lwq6DxAXRcQmtChO11EZXHiyg-AbqGaz784XLylrGjYHpLwbDXcq-VHMl0uzOGve7OFoL/s1600/menuse.jpg);
color: #eee;
height: 35px;
border-bottom: 4px solid #666;
width: 100%;
max-width: 950px;
}

5. Save Template!

Demikian Cara Membuat Navigasi Menu Melayang di Template Google SEO. Kode di atas juga bisa diterapkan di template blog lain, tinggal sesuaikan kode #menu dengan nama kode navigasi menu di template blog Anda.

Good Luck & Happy Blogging! (http://googleseodemo.blogspot.com).*

Thanks for reading & sharing Google SEO