Tips Paling Enteng Membuat Menu Bar Cantik Plus Kotak Pencarian

Menu bar yang berdampingan dengan search box mulai tenar di kalangan blogger Indonesia semenjak salah satu webmaster kita, Agus Ramadhani memasangnya di bawah header website miliknya. Saat ini, mungkin ada ratusan blogger yang memasang menu bar plus kotak pencarian di blog mereka. Menurut saya, banyaknya blogger yang memasang menu bar seperti itu sangatlah wajar karena menu bar yang berdampingan dengan kotak pencarian mempunyai tampilan yang sangat manis. Untuk melihat

---

bgaimana tampilan dari menu bar yang saya jelaskan di atas, coba sobat blogger klik gambar di bawah ini untuk memperbesar ukurannya!

Bagaimana pendapat sobat blogger tentang menu bar di atas? Manis bukan? Menu bar ini bisa sobat blogger modifikasi sesuai dengan keinginan sobat blogger sehingga setiap menu memiliki sub menu (Bercabang).

---

Cara Memasang Menu Bar Plus Kotak Pencarian Di Blog

---

• Sign In di blogger.com
• Pada Menu Drop Down, sobat pilih Template
• Kemudian klik tombol "Edit HTML" dan Klik Proceed
• Kasih tanda centang pada Expand Widget Template.
• Copy Paste kode berikut tepat di atas kode ]]></b:skin>

#menubar{
width:920px;
height:38px;
background:#222;
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:#222;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #222;
color: #fff;
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;
}

• Pasang kode berikut, sebelum 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://URL-YANG-DI-TUJU.blogspot.com/'>Menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 2</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 3</a>
<ul>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 4</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 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/AVvXsEgApf1_y4z23jlDyEQUM4YepveI8YmW8dszFSXX1FB2FsKBzLKwFsYl8tAE26UqCHQmvJB1VBJhbwJdU3dewK1GNaLHOs5Se8RNSqnTHQgzzcSHOKujhA3fj-SDeRreCHqPSobznOC8_jE/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>

• Klik Preview terlebih dahulu. Kalau hasilnya sudah mantap, jangan lupa untuk menyimpan template sobat blogger.

Tambahan :

1. Setiap template memiliki kode yang berbeda, jadi, jika di dalam template sobat blogger tidak terdapat kode <div id="content-wrapper"> sobat blogger bisa meletakkan kode HTML di atas sebelum kode <div id="header-wrapper"> atau <div id="outer-wrapper"> atau <div class='tabs-outer'> atau sebelum kode <div class='tabs-cap-top cap-top'>
2. Jika sobat blogger ingin mengganti warna dari menu bar di atas, sobat blogger tinggal mencari kode #222 kemudian di ganti dengan kode warna yang sesuai dengan warna template sobat.
3. Ganti http://URL-YANG-DI-TUJU.blogspot.com/ dengan URL blog sobat. Dan jangan lupa juga untuk mengganti "Menu" dan "Sub Menu" sesuai Title yang diinginkan.