Cara Membuat Search Box di Menubar Pada Blog

Sahabat, kali ini kita akan sedikit melanjutkan atau mungkin menyambung tulisan sebelumnya, yaitu bagaimana membuat menubar pada blog dan materi yang akan kita tambhakan adalah bagaimana menambhakan search box di dalam menubar.



Oiya sebelumnya kita ulas sedikit dulu tentang pembuatan menubarnya, sebab materi ini akan berkaitan. Mungkin bagi teman yang belum tahu cara bikin menubar silahkan ikuti langkah berikut yang tidak begitu sukar...

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:920px;
height:38px;
background:#de360f;
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:#F0512D;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #de360f;
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 #F0512D;
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:1px solid #F0512D;
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;
}

6. Kemudian Sahabat, cari kode <div id="content-wrapper">
7. Lalu letakkan kode di bawah ini, di atas kode <div id="content-wrapper">

    <div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://zamanbisnisonline.blogspot.com//'>Menu 1</a></li>
<li><a href='http://zamanbisnisonline.blogspot.com//'>Menu 2</a></li>
<li><a href='http://zamanbisnisonline.blogspot.com//'>Menu 3</a>
<ul>
<li><a href='http://zamanbisnisonline.blogspot.com//'>Sub menu 1</a></li>
<li><a href='http://zamanbisnisonline.blogspot.com//'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://zamanbisnisonline.blogspot.com//'>Menu 4</a></li>
<li><a href='http://zamanbisnisonline.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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWQKSVOSv8W_xVhspbllY4Dxy1dGTt7M0MM_l13aE6jqP1nbAuN4yfo48AXVSsOtwJdb18ZcrPIB2B1nrONy9arFUTiXJFiyoTFcn8GVW6aQbyE80W86oI7Nj1KBu9AbfC9uNfAF8uHbo/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>

8.Terakhir simpan template dan rasakana aja hasilnya...

Keterangan:

•     Ganti tulisan yang berwarna Biru dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
•    Ganti tulisan berwarna Merah (Menu / Submenu) dengan tulisan judul menubar tersebut, seperti: About, Contact, Sitemap atau lainnya.
•     Untuk mengubah panjang menubar bisa sobat ganti tulisan 920px menjadi sesuai dengan keinginan Sahabat.
•     Untuk mengganti warna menubar, coba cari kode background:#de360f; . Ganti kode yang berwarna orange dengan kode warna yang diinginkan.
•     Nah, jika Sahabat. ingin menambah item menubar (list),Sahabat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
•     Bila kode <div id="content-wrapper"> tidak ada, coba ganti dengan <div id="header-wrapper"> atau <div id="outer-wrapper">