Membuat Menu Horizontal dengan Sub Menu Vertikal di Blog.
Yah karena ada yang nanya caranya ya saya buatkan tutorialnya. Contoh Silahkan arahkan cursors anda ke menu yang bernama "free lirik lagu" punya saya diatas maka otomatis menu akan memanjang kebawah menampilkan menu lainnya.
Demo.
Untuk membuatnya anda bisa menggunakan tutorial berikut:
1. Login ke akun Blogspot pembaca
2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
4. JANGAN beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
5. Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut
<div id="nav">
<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>
10. Jangan lupa mengganti kode URL dan nama yang berwarna merah.
11. Paste dibawah kode
<b:widget id='Header1' locked='false' .....dst.........'/>
</b:section>
</div>
Langkah Selanjutnya Copy Kode Dibawah Ini:
#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.
Sumber:http://nurad1k.blogspot.com
