MEMBUAT MENU BAR CANTIK PLUS KOTAK PENCARIAN

Menu bar yang berdampingan dengan search box mulai tenar di kalangan blogger Indonesia
semenjak salah satu webmaster kita, Agus Ramadhani memasangnya dibawah header
website miliknya. Saat ini, mungkin ada ratusan blogger yang memasang menu bar plus
kotak pencarian di blog mereka. Menurut saya,banyaknya blogger yang memasang menu bar
seperti itu sangatlah wajar karena menu bar yang berdampingan dengan kotak pencarian mempunyai tampilan yang sangat manis. Untuk melihat bagaimana tampilan dari menu bar yang saya jelaskan di atas, coba sobat blogger klik gambar di bawah ini untuk memperbesar ukurannya!


Bagaimana pendapat sobat blogger tentang menu bar di atas? Manis bukan? 
Menu bar ini bisa sobat blogger modifikasi sesuai dengan keinginan sobat blogger sehingga setiap menu memiliki sub menu (Bercabang).

---

Cara Memasang Menu Bar Plus Kotak Pencarian Di Blog

---

1.Sign In di blogger.com

2.Pada Menu Drop Down, sobat pilih Template

3.Kemudian klik tombol "Edit HTML" dan Klik Proceed

4.Copy Paste kode berikut tepat di atas kode ]]></b:skin>

#menubar{
width:920px;
height:38px;
background:#222;
border-radius:2px;
float:center;
margin:0px auto;
}
#menubar-left{
float:left;
width:720px;
padding:0 0 2px 2px;
}
#menubar-right{
float:right;
width:170px;
padding-top:8px;
padding-right:18px
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:12px 10px;
color:#fff;
position:relative;
font-weight:bold !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
text-decoration:none;
background:#222;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #222;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #222;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #222;
border-radius:0px 0px 8px 8px;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, 
#menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
#search{
border:1px solid #222;
height:20px;
width:180px;
background:#f6f4f4;
}
#search input{
color:#777;
border:none;
}
#s-m{

font-size:11px;
width:180px;
padding-left:4px;
padding-top:5px;
margin:0;
}
#search-t #search{
background-color:#FFFFFF;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
#search-t #s-m{
width:155px;
padding-top:3px;
}

5.Kopas dan pasang kode berikut, diatas kode <header> jika ingin menu diatas header 
dan atau pasang kode berikut di atas kode </header> jika ingin kode di bawah header

 <div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 2</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 3</a>
<ul>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 4</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 5</a></li>
</ul>
</div>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' 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 src='http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/
QUBsym_R9V0/s200/search-c.png' style='border: 0pt none ;vertical-align: top; 
padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>

6.Klik Preview terlebih dahulu. Kalau hasilnya sudah mantap, jangan lupa
 untuk menyimpan template sobat blogger.

Tambahan :

1.Jika sobat blogger ingin mengganti warna dari menu bar di atas, sobat blogger 
tinggal mencari kode #222 kemudian di ganti dengan kode warna yang sesuai 
dengan warna template sobat.

2.Ganti http://URL-YANG-DI-TUJU.blogspot.com/ dengan URL blog sobat. 
Dan jangan lupa juga untuk mengganti "Menu" dan "Sub Menu" sesuai Title 
yang diinginkan.