Cara Membuat Menubar Dengan Search Box

Cara Membuat Menubar Dengan Search Box

Seperti yang sudah saya katakan pada artikel sebelumnya mengenai cara membuat menubar di blog , sekarang juga sama seperti pada artiekel sebelumnya. Akan tetapi hanya terdapat sedikit perbedaan di dalam menubar yang sekarang yaitu adanya search box di samping menubar ini. Caranya pun sama, silahkan diperhatikan langkah-langkahnya :

1. Seperti biasa masuk dulu ke akun blog anda 
2. Masuk ke menu template 
3. Pilih dan klik edit html 
4. Cari kode ]]></b:skin> ( gunakan ctrl + f agar lebih cepat ) 
5. Dan masukkan kode berikut ke atasnya


#menubar{
width:1000px;
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. Selanjutnya, 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://Donesiarony.blogspot.com/'>DONEsia1</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia2</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia3</a></li>
<ul>
<li><a href='http://Donesiarony.blogspot.com/'>Sub menuDONEsia 3</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>Sub menu DONEsia3</a></li>
</ul>
</li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia4</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia5</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/AVvXsEisDfWrYACVwX6UWhUWRDWWN4vG-aEMCKnSMNeoDY4N-TiyLDuOe1nn5pHUR0_vAzAU1-Idmzg4Dz1VcZyy2Qq3EGyjpiD_B5tKB_kWLESwtHHBE8PscixAiSfsG-UiLwNabY1aj-uHYdo/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. Kemudian klik save atau simpan

keterangan :

• untuk kode yang berwarna merah ganti dengan link menubar yang diinginkan. Misalnya :link artikel , link kategori atau label, atau yang lain 
• untuk yang bertuliskan DONEsia ganti dengan nama judul menubar sesuai keinginan, missal: trik and tips, about ,dan lain-lain 
• yang bertulisakan DONEsia3.1 dan DONEsia 3.2 ganti dengan menu yang ingin digunakan untuk dropdown 
• Bila kode <div id="content-wrapper"> tidak ada, coba ganti dengan <div id="header-wrapper"> atau <div id="outer-wrapper"> atau <div class='main-outer'>

Tweet

Fb

Postingan terkait:

Ditulis Raka — Saturday, June 4, 2016 — Add Comment — Tutorial