Cara membuat Menubar dan Search Box di blog

Ok langsung aja,sesuai dengan judul posting kali ini saya akan share cara membuat menu bar dengan kotak pencarian,dengan kotak pencarian di blog teman maka akan mempermudah pengunjung mencari posting-posting teman yang lain....
1.Seperti biasa teman harus login ke bloger
2.Masuk ke menu template
3.Edit HTML
4.Cari kode ]]></b:skin> (gunakan ctrl+f untuk memudahkan pencarian)
5.Copy semua kode yang ada di dalam scroll box
6. Pastekan tepat 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;
}

Jika langkah di atas sudah selesai lanjutkan ke langkah berikutnya
7.Kita menuju ke Tata letak
8.Tambahkan Gadeget yang ada tepat di bawah header
9.HTML/Java Script
10.Copy semua kode yang ada di dalam scroll box dan paste ke dalam kotak konten

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://s4tri0.blogspot.com/'>Edit me 1</a></li>
<li><a href='http://s4tri0.blogspot.com/'>Edit me 2</a></li>
<li><a href='http://s4tri0.blogspot.com/'>Edit me 3</a>
<ul>
<li><a href='http://s4tri0.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://s4tri0.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://s4tri0.blogspot.com/'>Edit me 4</a></li> <li><a href='http://s4tri0.blogspot.com/'>Edit me 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/AVvXsEiqj4oVw-Vy3kRd5y3bZ7SMVxSkRedgemIW-nv4C11loVaCrxKQqV0hsr_6kj8pMZcPS0PC3BbHmPcNJZ7EKMiahfu0wGOqVoXRCv_l2k0pcRePWITYPql9Wb7EaigkcOkbGbyO-Ezn8yw/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>

11.Save dan lihat hasilnya.
"Untuk link dan text menu saya yakin teman tau cara menggantinya"
Untuk melihat demo nya silahkan Click DI SINI






==================================================Link Sumber : 1000arsip