Membuat Menu Navigasi Blog Tetap Muncul Saat Discroll

Ketika menu navigasi tetap melayang ketika di scroll sangat membantu bagi pengunjung untuk mendapatkan apa yang pengunjung harapkan ketika berselancar di web. Karena jika pengunjung ingin mencari menu apa yang ada di web tersebut tidak perlu untuk scroll ke atas lagi.

Menu Navigasi (Navigation Menu) yaitu menu blog yang biasa ada di deretan Home, About, dan seterusnya. Menu navigasi sangat penting bagi pengunjung agar bisa dengan mudah berselancar dan browsing di web lebih lama.

kebetulan sebelum mahesa.id membuat postingan ini, mahesa.id berkunjung ke blognya pak Adhy disitu saya tertarik dengan theme nya ketika di scroll menu navigasinya tetap muncul. Bagi sobat yang ingin menu navigasinya tetap muncul ketika di scroll mari simak cara cara di bawah ini. Dan perlu di ketahui, tutorial dibawah hanya untuk merubah navigasi yang sudah ada di blog sobat.

Membuat Menu Navigasi Blog Tetap Muncul Saat Discroll

• Masuk Dasboard Blogger > Themplate > Edit
• Cari kode </head>. untuk mempermudah silahkan gunakan CTRL+F
• Copy kode dibawah ini dan salin kode tersebut di atas kode </head>

<style>
sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}
</style>

• Bungkus kode menu navigasi di blog sobat dengan kode seperti kode dibawah ini

<sticknav>

Kode HTML Navigasi Menu Anda di Sini

</sticknav>

Kode navigasi menu biasanya diawali dengan kode <nav id=’ dst hingga </nav> atau <div id=’ dts.. hingga </div>

Terakhir simpan javascript dibawah ini persis di atas </body>

</script> <script type="text/javascript"> $(document).ready(function() { var aboveHeight = $('header').outerHeight(); $(window).scroll(function(){ if ($(window).scrollTop() > aboveHeight){ $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px'); } else { $('sticknav').removeClass('fixed').next().css('padding-top','0'); } }); }); </script>

Simpan Themplate dan lihat hasilnya.

Demikian tutorial Membuat Menu Navigasi Blog Tetap Muncul Saat Discroll, jika sobat masih kebingungan dalam memasang kode kode di atas mari diskusikan di kolom disqus dibawah.