Membuat Navigasi Horizontal 2 Baris

Widget ini cocok buat blog yang ingin menampilkan banyak link dibagian bawah header. Saya sudah mencobanya dibeberapa template standard dari blogger. Jika berminat, berikut cara memasangnya.

1. Login ke blogger.

2. Masuk ke Tata letak.

3. Klik Edit HTML.

4. Sebaiknya backup template anda terlebih dahulu.

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

/*-- Nav --*/

#nav {

width:980px;

float:left;
background:#444;
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:#f9f9f9;
text-decoration:none;
margin:0;
padding:9px 10px;
}



#nav ul li a:hover {
color:#B40404;
background-color:#fff;
margin:0;
padding:9px 10px;
}



#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:980px;

background:#46040C;
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;
margin:0;
padding:8px 10px;
}



#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>

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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' 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://www.deddycamp.com'>Deddy camp</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>

8. Ganti tulisan yang berwarna merah dengan link yang anda ingin tampilkan, karena link ini akan muncul secara automatis ketika link pertama pada baris ke-2 anda isi.


9. Simpan Template.

Keterangan :

• width:980px --->> lebar dari navigasi, sesuaikan dengan lebar template anda. 
• width:700px --->> lebar dari navigasi utama (tidak termasuk widget search engine).
• Contoh : jika anda mempunyai template dengan lebar 900px, maka ganti angka 980px menjadi 900px dan ganti angka 700px menjadi 620px.
• Tulisan uji coba (Header) adalah judul blog, sesuaikan dengan judul blog anda, sehingga ketika melakukan pencarian tidak bingung karena setiap blog mempunyai judul yang berbeda toh, jadi jangan di telan mentah-mentah kode :

<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>

Semoga berhasil dan bermanfaat tentunya