Cara Membuat Menubar dengan Kotak Pencarian

Cara Membuat Menubar dengan Kotak Pencarian - Menubar merupakan kumpulan link yang dibuat untuk memudahkan pengunjung dalam mencari sesuatu yang ada di blog kita. Letak Menubar ini berada di atas, tepat di atas postingan. Sedangkan komposisinya tergantung dengan selera masing-masing sesuai dengan kebutuhan.

Komposisi ideal sebuah Menubar terdiri dari Home atau Beranda yang kemudian diletakkan link menuju ke halaman depan atau homepage dari sebuah blog, kontak pemilik blog atau sang blogger yang kemudian diletakkan link menuju ke sosial media maupun halaman yang memungkinkan pengunjung untuk berinteraksi secara pribadi dengan sang blogger. Bisa juga diletakkan link menuju ke label artikel atau postingan. Intinya, sesuatu yang dipasang pada Menubar pastinya dianggap penting dan dapat mempresentasikan isi dari sebuah blog.

Menubar yang akan kita bahas kali ini sedikit berbeda karena akan dilengkapi dengan Kotak Pencarian sebagaimana telah kita bahas pada artikel sebelumnya tentang Trik Membuat Widget Kotak Pencarian Keren untuk Blog yang tujuannya jelas agar tampilan blog lebih efektif dalam memanfaatkan ruang, dan sekaligus dapat mempercantik tampilan blog. Lihat gambar tampilan Menubar di atas.

Cara Membuat Menubar dengan Kotak Pencarian

• Login ke blogger
• Pilih menu Template
• Klik Cadangkan/Pulihkan (untuk membuat backup sebagai antisipasi bila terjadi sesuatu)
• Klik Edit HTML
• Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk memudahkan pencarian)
• Copy kode di bawah ini dan letakkan 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; }

• Selanjutnya cari kode <div id="content-wrapper"> (bila tidak ada coba cari kode <div id="content-wrapper">, atau <div id="header-wrapper">, atau <div id="outer-wrapper"> tergantung pada template yang digunakan)
• Copy kode di bawah ini dan letakkan tepat di atas kode <div id="content-wrapper">

<div id='menubar'> <div id='menubar-left'> <ul> <li>Home</li> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a> <ul> <li><a href='#'>Sub menu 1</a></li> <li><a href='#'>Sub menu 2</a></li> </ul> </li> <li><a href='#'>Edit me 4</a></li> <li><a href='#'>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='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>

• Simpan Template dan lihat hasilnya

Keterangan:

Ganti lambang # (baca:pagar) dengan link yang akan dipasang pada Menubar

Ganti nama Menu 1 dan seterusnya dengan nama yang sesuai dengan linknya

Angka 920px merupakan panjang Menubar, sesuaikan dengan templatenya

Ganti kode warna sesuai dengan selera #de360f (untuk melihat kode warna klik di sini)

Demikianlah Cara Membuat Menubar dengan Kotak Pencarian ini, semoga bermanfaat dan selamat mencoba.