Cara Membuat Navigasi Menu Melayang di Template Google SEO

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/AVvXsEhREBejB-HdCSOWe8SVbM__ubCDUTibe8FW5SPfba3FFSGnzUIhB1wIUS8HisGUKObiN0XXEpWyBiyZ6m05VcVLbj7Lo133vkiIWggNMTcFThWnOwniHiHtEBFgQPGnmI24WdO66C8p4Wv6/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/AVvXsEhREBejB-HdCSOWe8SVbM__ubCDUTibe8FW5SPfba3FFSGnzUIhB1wIUS8HisGUKObiN0XXEpWyBiyZ6m05VcVLbj7Lo133vkiIWggNMTcFThWnOwniHiHtEBFgQPGnmI24WdO66C8p4Wv6/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.