Membuat Menu Horizontal dan Sub-Menu Vertikal pada Blog

Kali ini saya mau share tentang cara membuat menu horizontal dan sub menu nya pada blog. Menu sangat berguna bagi para pengunjung untuk mencari kategori posting, serta membuat rapi blog kita. Langsung saja kita mulai ya sob.

1. Masuk ke Rancangan
2. Lalu pilih Edit HTML
3. Download dulu template kamu untuk menghindari hal-hal yang tidak diinginkan.

4. Cari code ini
]]></b:skin>
5. Masukkan script di bawah ini tepat di di atas code tersebut
#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; }
6. Simpan Template.
7. Sekarang Masuk ke Edit Halaman masih di menu rancangan.
8. Buat widget baru, tempatkan di footheader tepatnya di bawah header.
9.  Pilih HTML
10. Masukkan script berikut ini

<div class='menuhorisontal'><ul id='nav'> <li><a href='/'>Home</a></li> <li><a href="url menu 1">menu 1</a> <ul><li><a href="url sub menu 1.1">sub menu 1.1</a></li> <li><a href="url sub menu 1.2">sub menu 1.2</a></li> <li><a href="url sub menu 1.3">sub menu 1.3</a></li></ul></li> <li><a href="url menu 2">menu 2</a> </li> <li><a href="url menu 3">menu 3</a><br /> <ul><li><a href="url sub menu 3.1">sub menu 3.1</a> </li> <li> </li> <li><a href="url sub menu 3.2">sub menu 3.2</a> </li> <li><a href="url sub menu 3.3">sub menu 3.3</a> </li> <li><a href="url sub menu 3.4">sub menu 3.4</a> </li> <li><a href="url sub menu 3.5">sub menu 3.5</a></li></ul></li> <li><a href="url menu 4">menu 4</a> </li> </ul></div>

• Menu merupakan menu utama yang terlihat langsung di halaman blog, bisa kalian edit sesukanya, url menu isi dengan url dari menu utama
• Sub Menu merupakan cabang atau anak dari menu utama, yang akat terlihat seperti dropdown kalu cursor mendekatinya. Bisa diisi sesukanya.

Kalau menarik jangan lupa komen ya teman.