Membuat Horizontal Menu 2 Baris

Membuat Horizontal Menu 2 Baris- Akhir-akhir ini saya lebis sering mengedit template dari pada membuat artikel-artikel baru.. Yaa.. memang habis ganti template.. Yang paling saya serius mengeditnya adalah Horizontal Menunya. Maklum
Simple Fresh ini memiliki Horizontal menu yang sangat simple. Jadi tidak banyak sesuatu yang bisa saya kasih link dan di tampilkan di Horizontal menu. Nah dengan menggunakan horizontal menu ini saya bisa menaruh
agak banyak link di horizontal menu saya. Lagiian horizontal menu ini mempunyai style yang bagus.
Apalagi saya telah menambahkan Efek Hover yang menarik dari sumbernya

*Gambar yang di ambil dari Horizontal Menu Ajinoor

Widget ini cocok buat blog yang ingin menampilkan banyak link dibagian bawah header. Sudah Banyak Yang Coba lho...
Tertarik ?? Silahkan coba...
Cara Pembuatan Horizontal Menu 2 Baris

Masuk ke Tata letak.

Klik Edit HTML.

Sebaiknya backup template sobat terlebih dahulu.

Letakkan kode berikut sebelum kode ]]></b:skin>

/*-- Nav --*/

#nav {
width:960px;
float:left;
background:#CCDEE8;
height:33px;
border-bottom:1px solid #fff;
padding:0;
}

#nav-left {
float:left;
display:inline;
width:700px;
}

#nav-right {
float:right;
display:inline;
width:200px;
}

#nav ul {
position:relative;
overflow:hidden;
font:1em verdana,Helvetica,sans-serif;
font-weight:700;
font-size:13px;
margin:0;
padding:0;
}

#nav ul li a,#nav ul li a:visited {
display:block;
color:#000000;
text-decoration:none;
margin:0;
padding:9px 10px;
}

#nav ul li a:hover {
color:#ffffff;
background-color:#4C77B6;
margin:0;
padding:9px 10px;
text-transform: uppercase;

font-size: 15px;
font-style:italic;
}

#search {
background:#f9f9f9 url(http://lh3.ggpht.com/_7Y9pl24WpQY/SttgbS-ClLI/AAAAAAAAB78/PFI3z4AHOyw/search_thumb%5B1%5D.gif) 6px 0 no-repeat;
border:1px solid #b3b3b3;
float:right;
height:20px;
width:160px;
margin-top:5px;
margin-right:5px;
padding-top:2px;
}

* html #search {
margin-right:5px;
}

#search input {
font-family:Arial,Helvetica,sans-serif;
background:transparent;
border:0;
color:#000;
float:left;
font-size:12px;
width:120px;
padding-left:27px;
margin:0;
}

/*-- Nav2 --*/

#nav2 {
float:left;
display:inline;
width:960px;
background:#4C77B6;
height:30px;
clear:both;
margin:0 auto;
padding:0;
}

#nav2 ul {
position:relative;
overflow:hidden;
font:1em Verdana,Arial,Helvetica,sans-serif;
font-weight:500;
margin:0;
padding:0;
}

#nav2 ul li a,#nav2 ul li a:visited {
display:block;
color:#fff;
text-decoration:none;
margin:0;
padding:8px 10px;
}

#nav2 ul li a:hover {
color:maroon;
background-color:#fff;
text-transform: uppercase;
font-weight: bolder;
font-family:chiller;
font-size: 15px;
font-style:italic;
margin:0;
padding:8px 10px;-moz-box-shadow: 0 0 13px;
}

#nav ul li,#nav2 ul li {
float:left;
list-style:none;
}

6. Kemudian cari kode yang mirip seperti dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='uji coba (Header)' type='Header'/>
</b:section> </div>

*Mungkin Sebagian Template Berbeda-beda
Kalau kesulitan cari dari <div id='header-wrapper'> dan mungkin sebagian template agak panjang, cari sampai ketemu kode </b:section> </div>

7. Letakkan kode berikut tepat setelah kode diatas :

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList10' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML70' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<div id='search'>
<input id='search' maxlength='150' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='nav2'>
<b:section class='top-tabs' id='top-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList11' locked='true' title='link Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav2'>
<ul>
<li><a href='http://http//ajinoor.blogspot.com/2008/02/contact-me.html'>Contact Me</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

*Bila template anda sudah ada horizontal menunya gamti saja kode itu

9. Simpan Template.

Terimakasih saya kepada Source dan Membuat Horizontal Menu 2 Baris ini saya atur sedikit htmlnya