Membuat Menu Horizontal dengan Sub Menu Vertikal di Blog
Untuk membuatnya anda bisa menggunakan tutorial berikut:
- Login ke akun Blogspot pembaca
- Klik link menu Tata Letak, kemudian pilih Edit HTML.
- Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
- JANGAN beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
- Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut
<div id="nav">10. Jangan lupa mengganti kode URL dan nama yang berwarna merah.
<ul>
<li><a href="URL">NAMA</a></li>
<li><a href='URL'>NAMA</a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
<li><a href='URL'>NAMA</a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
<li><a href='URL'>NAMA </a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
<li><a href='URL'>NAMA</a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
</ul>
</div>
11. Paste dibawah kode
<b:widget id='Header1' locked='false' .....dst.........'/>Langkah Selanjutnya Copy Kode Dibawah Ini:
</b:section>
</div>
#NavbarMenu {
background: #000;
width: 874px;
height: 35px;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
color: #fff;
font-weight: bold;
margin: 0px;
padding: 0px;
}
#NavbarMenuleft {
width: 874px;
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: #808080;
height: 24px;
color: #fff;
display: block;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: bold;
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: #c0c0c0;
color: #000;
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: #c0c0c0;
width: 150px;
color: #000;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
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: #000;
color: #fff;
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;
}
Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain, silahkan menuju ke postingan saya tentang kode warna dan contohnya.
Khusus kode "color:" ini adalah kode buat warna hurufnya, jadi silahkan diganti dengan kode warna lainnya dengan mengubah huruf yang saya warnai biru.
Setelah itu paste diatas ]]></b:skin> lalu save template.
Lihat hasilnya.
Semoga berhasil dan sukses.
Semoga sukses!! Berhasil, jangan lupa komen jika gagal/berhasil