Menu Navigasi Dropdown Bounce Effect. Dengan menambahkan menu navigasi pada blog, pengunjung menjadi lebih mudah menelusuri dan menemukan artikel dalam grup atau kategori tertentu. Misalnya, jika menu navigasi menyertakan bagian berlabel widget, pengguna dapat mengakses menu drop-down yang berisi berbagai opsi terkait widget, seperti widget Facebook, widget berlangganan email, widget Google Plus, dan banyak lagi.
Perancangan sebuah website harus memperhatikan pentingnya navigasi website. Oleh karena itu, penting untuk memastikan navigasi situs Anda efektif. Ini harus memungkinkan pengguna untuk dengan mudah menavigasi halaman yang ada.
Evaluasi rutin terhadap navigasi Anda diperlukan, dan setiap masalah atau kebingungan yang dialami pengunjung harus segera ditangani dan diselesaikan. Meningkatkan SEO situs web adalah langkah penting untuk mencapai peningkatan visibilitas di mesin pencari.
 |
| Menu Nav |
Navigasi Menu Dropdown Bounce Effect
Struktur navigasi hierarki adalah jenis navigasi web yang umum digunakan oleh situs portal berita, yang menunya berbeda-beda di setiap halaman. Menu halaman beranda menyertakan link ke kategori tertentu, namun bila Anda memilih kategori, menu akan beralih ke subkategori.
Sebelumnya sepeser.com telah menunjukkan cara membuat menu navigasi lavalamp dan juga membahas tentang menu yang dapat diubah ukurannya di berbagai perangkat dan menu dengan tombol untuk media sosial di Blogger.
Cara Membuat Navigasi Menu Dropdown Bounce Effect di Blogger
1. Di Blogger, pilih blog kamu
2. Pilih menu Tema 👉 Edit HTML
 |
| Edit Html |
3. Jika sudah ada menu pada template maka dihapus saja, tapi jika menunya lebih bagus dari menu ini sebaiknya berpikir 4x sebelum menghapusnya.
4. Letakan kode di bawah ini di atas kode
]]></b:skin>#navsepeser { background:#156AA6; overflow:hidden; }
#navsepeser ul { float:left; height:30px; list-style:none; overflow:hidden; margin:0; padding:0; }
#navsepeser li { float:left; text-shadow:1px 1px 2px #0066B3; padding:0; }
#navsepeser li a { background:#156AA6; color:#eee; display:block; font-weight:400; line-height:30px; border-left:1px solid #4B88B3; border-right:1px solid #043457; text-align:center; text-decoration:none; margin:0; padding:0 25px; }
#navsepeser li.depan a { border-left:none; }
#navsepeser li ul { background:#156AA6; height:auto; border:0; position:absolute; width:225px; z-index:80; box-shadow:0 1px 5px #034257; display:none; margin:0; padding:0; }
#navsepeser li li { display:block; float:none; width:225px; border-top:1px solid #4B88B3; border-bottom:1px solid #043457; margin:0; padding:0; }
#navsepeser li:hover li a { background:#156AA6; }
#navsepeser li ul a { display:block; height:30px; font-size:12px; font-style:normal; text-align:left; margin:0; padding:0 10px 0 15px; }
#navsepeser li a:hover,#navsepeser li:hover > a { color:#fff; }
#navsepeser li:hover ul.hidden { display:block; }5. Kode ini diletakan di tempat paling cocok di dalam template kamu, misalnya mengganti kode html menu widget yang lama.
<nav id='navsepeser'>
<ul>
<li class='depan'><a href='/'>Beranda</a></li>
<li><a href='#'>Title 2</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Title 3</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Title 4</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
</ul>
</nav>6. Letakan kode di bawah ini di atas kode
</head>.<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$('#navsepeser li ul').removeClass('hidden');
$('#navsepeser li').hover(function() {
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
}, function() {
$('ul', this).slideUp(600, 'easeInExpo');
});
//]]>
</script>Video Tutorial
Video di atas adalah tutorial cara membuat dan memasangnnya di Blogger, bagikamu yang masih belum mengerti dengen cara pemasangannya.
Penutup
Aspek penting dalam meningkatkan SEO situs web mencakup memastikan navigasi yang efektif, yang memfasilitasi pengguna dalam menemukan dan mengakses konten yang diinginkan dengan mudah.
Jika situs web Anda mudah dinavigasi, pengguna cenderung menghabiskan lebih banyak waktu di situs, mengunjungi lebih banyak halaman, dan memiliki rasio pentalan lebih rendah. Selain itu, mengoptimalkan navigasi juga memiliki dampak menguntungkan pada struktur situs web dan tautan internal.
0 Komentar untuk "Membuat Menu Navigasi Dropdown Bounce Effect di Blog"