 |
| Cara Membuat Menu Navigasi Blog Melayang Saat Halaman Discroll ke Bawah |
Membuat Blog Edukatif Part 2: Menu Navigasi Melayang
Sebelum pulang kerja, Ane sempatkan untuk membagikan cara mudah membuat menu navigasi melayang (tetap muncul) saat halaman di scroll (ditarik ke bawah). Artikel ini saya maksudkan untuk melengkapi artikel membuat blog menjadi semakin edikatif informatif kepada pembaca.
Jika Sobat menggeser halaman blog ini ke bawah, halaman menu navigasi akan tetap muncul dan melayang. Tentu hal ini akan sangat mempermudah rekan-rekan pembaca setia.
Pentingnya Halaman Navigasi Menu Tetap Muncul
Ketika Sobat sedang enak-enaknya membaca artikel dari blog ini, tiba-tiba di bagian akhir memerlukan bantuan dari link internal yang berada di menu navigasi. Maka langkah yang paling mungkin terjadi adalah menggeser scrool ke atas.
Langkah-langkah Membuat Menu Navigasi Tetap Melayang
1. Berdo’a
2. Masuk akun blogger > Template > Edit Html
3. Copy paste kode di bawah ini tepat di atas kode </body>
<script type=’text/javascript’>
//<![CDATA[
$(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>
4. Ganti kode elemen warna biru di atas #nav dengan kode elemen menu navigasi blog Sobat. Biasanya berupa kode .nav atau #menu atau .menu
5. Save template
6. Baca Hamdallah, aamiin.
OK Guys. Selamat mencoba and happy blogging.
(http://forumblogindo.blogspot.com/).*
Komentar ini telah dihapus oleh administrator blog.
mungkin ukuran size menunya kecil mas..disesuaikan aja pixelnya
gan mau tanya ni.kenapa pas di scroll,menunya jadi sempit??
gak ada sub menu