Cara Membuat Menubar Dengan Seach Box

Halooo Semuanyaaaa~ ^3^
Kali ini aku posting tentang "Cara Membuat Menubar Dengan Seach Box"
Nah, Langsung saja ya

~ Log In ke Blogger
~ Dashboard > Template > Edit HTML
~ Cari Kode ]]></b:skin> Gunakan CTRL+ F
~ Letakan Kode Berikut di Atas ]]></b:skin>

#menubar{
width:920px;
height:38px;
background:#F5C5DF;
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:#E81B90;
position:relative;
font-weight:bold !important;
font-family:Curlz MT,sans-serif;
font-size:12px;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
text-decoration:none;
background:#F0E0E9;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #D04896;
color: #DF3BD1;
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:1px solid #222;
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;
}

~ Kemudian Cari <div class='tabs-cap-top cap-top'> untuk Template Defalut, Tetapi jika Menggunakan Template hasil Download juga bisa, Kalau Tidak ada cari:

<div id="content-wrapper">

<div id="header-wrapper">

<div class='tabs-outer'>

~ Jika Sudah ketemu salah satu Kode Tersebut Letakan Kode berikut sebelumnya

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://vu-metal48.blogspot.com/'>Puja Kerang Ajaib</a></li>
<li><a href='http://vu-metal48.blogspot.com/'>Ululululu</a></li>
<li><a href='http://vu-metal48.blogspot.com/'>Haaaaa</a>
<ul>
<li><a href='http://vu-metal48.blogspot.com/'>SPPPPP48</a></li>
<li><a href='http://vu-metal48.blogspot.com/'>SQQQQQ48</a></li>
</ul>
</li>
<li><a href='http://vu-metal48.blogspot.com/'>Amburegul</a></li>
<li><a href='http://vu-metal48.blogspot.com/'>Emesiyu</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 == "") {this.value = "Cari Artikel Disini..";}' onfocus='if (this.value == "Cari Artikel Disini ...") {this.value = ""}' type='text' value='Cari Artikel Disini ...'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh9NcaHimg-MtXpvcJ6jZr8GqJPnrKfqpy0p11qEfPuN_oCBwTK9oWUrE_heuBMV76-p25cnRSUzeNuXyMn9cDOYyDVgshf8vW9VggULVi3lv_nAuG3A5MQLNjN3FV4gqW0QrvsHknIew/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>

NB: - Merah di Ganti dengan Link Tujuan
       - Orange di Ganti Dengan Sesuai Selera *Menandakan Nama Menu*
       - Biru dan Ungu adalah Link Tujuan dan Nama dari SubMenu
       - Hijau Menandakan Teks yang akan di tampilkan sewaktu Seach Box belum di Klik dengan Kursor

~ Klik Simpan

-SELESAI-

Terimakasih~
Semoga Bermanfaat~ ^^
Enjoy Blogging!!!~ ^3^