Membuat Navigasi Blog Tetap Muncul Saat Halaman Discroll

Disini saya akan membagikan tutorial bagaimana membuat navigasi blog tetap muncul meski saat halaman di scrol kebawah, sbenarnya tutorial ini sudah banyak yang mengetahui, dan banyak yang sudah membagikan tutorialnya, tapi apa salahnya saya yang seorang newbie membagikan tutorial bagi sesama newbie, hhe.
langsung saja pada tutorialnya:

tahap 1.
1. Buka menu Template > Edit HTML
2. Cari (CTRL+F) kode </body>
3. Copy kode berikut ini dan Paste di atas kode </body>

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

4. Ganti elemen .nav dengan elemen/kode CSS yang menjadi Navigasi Menu blog Anda.

Contoh kode CSS navigasi template yang aku gunakan adalah #header maka kode .nav aku ganti dengan kode #header

Contoh :

Kode CSS tiap template berbeda-beda sob, silahkan anda coba satu-satu.

5. Rubah angka 800 sesuai ukuran layar yang sobat kehendaki, maksudnya disitu adalah jika saat blog sobat di buka di ukuran layar 800px kebawah maka navigasi blognya tidak akan ikut scroll.

Jika ingin scroll disemua ukuran layar silahkan hapus angka 800. 

5. jika di templat sobat belum ada kode seperti ini <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> tambahkan kode tersebut di atas kode </head>

6. Save template

"Jika masih tidak bisa, rubah kode .nav dengan kode menubarmu yang benar benar sesuai."

terimakasih dan selamat mencoba

Baca Juga