Menu Navigasi Horizontal

Para peselancar internet umumnya sudah banyak mengenal Menu Navigasi Horizontal yang biasa berada pada bagian atas blog atau web. contoh Menu Navigasi Horizontal seperti ini :

Di sini saya akan berbagi sedikit dari hasil pencarian saya dari sesepuh blogger , ini caranya :

1. Login ke menu blogger. Klik Layout lalu Edit HTML

2. Backup template anda

3. Letakkan kode dibawah ini diatas kode:]]></b:skin>

/*-- (Nav & Search Box) --*/

#nav{

background: #1c426d; /* Warna backgroud Kotak Navigasi */

height:31px; /* Tinggi Kotak Navigasi */

padding:0px;

margin-bottom:5px

}

#nav-left{

float:left;

display:inline;

width:580px

}

#nav-right{

float:right;

display:inline;

width:275px;

padding:1px 0px 0px 0px;

}

#nav ul{

position:relative;

overflow:hidden;

padding-left:5px;

padding-top:1px;

margin:0;

font:1.1em /* Ukuran font tab navigasi */

Arial,Helvetica,sans-serif;

font-weight: bold;

}

#nav ul li{

float:left;

list-style:none

}

#nav ul li a, #nav ul li a:visited{

display:block;

color:#ffffff; /* Warna teks pada kotak navigasi */

margin:0 8px;

padding:5px 7px

}

#nav ul li a:hover{

color:#ffffff;

background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */

margin:0 8px;

padding:5px 7px

}

#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}

#searchform {

margin: 0;

padding: 0;

overflow: hidden;

display: inline;

}

#searchbox {

background: #EEE url(http://i37.photobucket.com/albums/e74/mrphoto16/search-icon-16x16.gif) no-repeat left top;

width: 180px;

height: 16px;

color: #202020;

font-size: 12px;

font-family:Verdana,Arial,Helvetica,sans-serif;

font-weight: normal;

margin: 2px 0px 0px 15px;

padding: 4px 0px 3px 25px;

border-top: 1px solid #DDD;

border-right: 1px solid #666;

border-left: 1px solid #DDD;

border-bottom: 1px solid #666;

display: inline;

}

#searchbutton {

background: #1c426d; /* Warna background tombol pencari */

color: #FFF; /* Warna teks tombol pencari */

font-size: 11px;

font-family:Verdana,Arial,Helvetica,sans-serif;

margin: 0px;

padding: 3px 0px 3px 2px;

font-weight: bold;

border-top: 1px solid #DDD;

border-right: 1px solid #666;

border-left: 1px solid #DDD;

border-bottom: 1px solid #666;

}

Keterangan:
Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.
Jika anda mempunyai gambar background sendiri, anda bisa menggantinya dengan menambahkan kode url(alamat gambar anda) disebelah kode "warna background kotak navigasi". Contohnya:
background: #1c426d url(http://i37.photobucket.com/albums/e74/mrphoto16/navhov.png);

4. Setelah itu cari kode seperti dibawah ini

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Herman Blog (Header)' type='Header'/>

</b:section>

<div style='clear: both'/>

</div>

5. Jika sudah ketemu, letakkan kode dibawah ini dibawahnya

<div id='nav'>

<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>

<b:widget id='LinkList1' 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='HTML30' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

<div id='nav-right'>

<form action='/search/' id='searchform' method='get' style='display:inline;'>

<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>

<input id='searchbutton' type='submit' value='GO'/>

</form>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

6. Sehingga susunannya menjadi seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Herman Blog (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' 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='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div> 

7. Lalu Save Template, lihat hasilnya.


OK