Cara Membuat Kotak Pencari/Search Box di Tab Menu Bar Blogger

Cara Buat Kotak Pencari/Search Box Pada Menu Bar Blogger

Terasa kurang pastinya jika menu bar tanpa kotak search/pencarian. Menu bar yang fungsinya memudahkan pengunjung menemukan laman website sobat, ditambah dengan fungsi kotak pencari yang memudahkan pengunjung menemukan artikel atau apapun yang diperlukan dengan cepat di website sobat.

Fungsi kotak pencari yang ada di website memudahkan pengunjung menemukan artikel atau apapun yang diperlukan dengan cepat di website.

Oke, sekarang sobat masuk ke dashboard blogger, pilih Tema, dan masuk ke Edit HTML.

• Pertama, biar gampang nyari kodenya, tekan CTRL + F lalu copas kode ini : ]]></b:skin> dan tekan enter. Yap trus letakin kode dibawah ini pas di atas kode ]]></b:skin> ini

#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;
}

• Setelahnya, search lagi kode <div id="content-wrapper"> , bila tidak terdapat kode tersebut bisa search lagi kode seperti ini : <div id="header-wrapper">, <div id="outer-wrapper">. Lalu copas kode di bawah ini dan letakkan tepat di atas kode tersebut trus ganti alamat dan Judul menu juga submenunya. 

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me 1</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me 2</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me 3</a>
<ul>
<li><a href='http://blognya-reggy.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me 4</a></li>
<li><a href='http://blognya-reggy.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='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>

• Terakhir klik simpan template dan lihat hasilnya di halaman depan website sobat.  Di bagian kanan tab menu bar sudah ada search boxnya,

Last, semoga Cara Membuat Kotak Pencari/Search Box di Tab Menu Bar Blogger dapat bermanfaat dan work pada website sobat. Fz akhiri.. 

• Tweet
• Share
• Share
• Share
• Share

About FZMotovlog

Seorang lelaki yang terlahir terlanjur ganteng maksimal. Terus berusaha memajukan FZMotovlog agar menjadi salah satu website otomotif terbaik untuk para pembaca fzm yang tercinta.

Related Post