Membuat Menu Navigasi Horisontal Dengan Submenu

Membuat Menu Navigasi Horisontal Dengan Submenu - Kali ini saya mau memberikan cara membuat menu navigasi yang menggunakan submenu seperti pada gambar disampin ini .

Menu navigasi di blog sangat berpengerahuh besar pada pengunjung . Jika blog menggunakan menu navigasi yang jelas otomatis pengunjung/pembaca akan senang menjelajah di blog kita . 
Dengan begitu page views di blog kita juga akan bertamnah . Nah tanpa panjang lebar saya akan menjelaskan caranya.

Membuat Menu Navigasi Horisontal Dengan Submenu :

• Login di Blogger.
• Masuk ke Rancangan/Design
• Klik Edit HTML
• Jangan lupa centang "Expand Widget Template"
• Cari tag kode ]]></b:skin> gunakan Ctrl+F untuk pencarian cepat.
• Paste kode berikut tepat di atas kode ]]></b:skin>

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

• Save template.
• Langkah selanjutnya masuk mkemudian asuk ke Rancangan/Design
• Pilih Elemen Laman Add Gadget
• Pilih yang "HTML/Javascript"
• Copy script di bawah ini .

<div class='menuhorisontal'>
<ul id='nav'>

<li><a href='http://tulis_alamat_url_tujuan'>Menu 1</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Menu 2</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Menu 2.a</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Menu 2.b</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Menu 2.c</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Menu 2.d</a> </li></ul>

<li><a href='http://tulis_alamat_url_tujuan'>Menu 3</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Menu 4</a> </li>

<li><a href='http://tulis_alamat_url_tujuan'>Menu 5</a> </li>
</ul>
</div>

• Klik Simpan

Silahkan di edit sesui selera anda .
Ket : Tulis_alamat_url_tujuan ganti dengan alamat url anda sendiri .
dan tulisan Menu 1, 2, dst ganti dengan judul menu anda ,sedangkan tulisan Menu 2.a, b ,c, dan d adalah submenu dari Menu 2 .