Cara Membuat Kotak Pencari/Search Box di Tab Menu Bar Blogger
Cara Buat Kotak Pencari/Search Box PadaMenu Bar Blogger
Terasa kurang pastinya jika menu bar tanpa kotaksearch/pencarian.Menu bar yang fungsinya memudahkan pengunjung menemukan lamanwebsite sobat, ditambah dengan fungsi kotak pencari yang memudahkan pengunjung menemukan artikel atau apapun yang diperlukan dengan cepat diwebsite sobat.
Fungsi kotak pencari yang ada diwebsite memudahkan pengunjung menemukan artikel atau apapun yang diperlukan dengan cepat diwebsite.
Oke, sekarang sobat masuk kedashboard blogger, pilih Tema, dan masuk ke Edit HTML.
- Pertama, biar gampang nyari kodenya, tekan CTRL + F lalu copas kode ini :]]></b:skin>dan tekanenter. 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 == "") {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/AVvXsEhHpsbHG4jBi-ym3uyFng96PFESWimPlLua_gXpw4S2Lrnw9YDuu03g6vi8Xi68CE3jZYu1DUrWL5w989cLwyn3wrwdUD05m3Q7qwN9dpVjmb6NRoClbcKiCcI5O9zbKgDOlVbhff0HQ0o/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..
About ucupoca
Seorang lelaki yang terlahir terlanjur ganteng maksimal. Terus berusaha memajukan ucupoca agar menjadi salah satu website otomotif terbaik untuk para pembaca fzm yang tercinta.