Cara membuat Menubar dengan search box

Cara membuat Menubar dengan search box

Cara membuat Menubar dengan search box - Siang sobat reggy, kali ini reggy akan menjawab pertanyaan dari para sobat. Yaitu membuat menubar di blog dengan search box. Seperti apa yang reggy jelaskan pada postingan sebelumnya, menubar atau bisa juga di sebut navigasi menu berfungsi sebagai tempat link agar pengunjung blog kalian mudah mengunjungi halaman penting blog kalian. Untuk sobat yang belum tau seperti apa menubar, liat pada bagian atas blognya reggy tulisan Home, Blogger tutorial, SEO tips. Nah, deretan menu itulah yang dinamakan menubar
cara membuat menubad dengan search box
Pada postingan kali ini, cara membuat menubar di blog nya beda dengan menubar sebelumnya. Bedanya yaitu menubar kali ini dilengkapi dengan search box di kanannya. Untuk demo bisa sobat lihat di gambar atas. Nah, search box jika di artikan ke dalam bahasa Indonesia yaitu kotak pencarian. Jadi, jika pengunjung sobat ingin mencari sesuatu di blog sobat, jadi tinggal mengetik di kotak pencarian tersebut. Untuk mengetahui bagaimana cara membuat menubar dengan search box bisa sobat langsung lihat di bawah ini

1. Seperti biasa, masuk ke blogger.com lalu login menggunakan akun google sobat
2. Masuk pada halaman Template
3. Klik Edit HTML kemudian Lanjutkan
4. Pertama - tama, cari kode ]]></b:skin> (gunakan ctrl+f untuk memudahkan pencarian)
5. Jika sudah ketemu, pasang kode di bawah ini 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;
}
6. Selanjutnya, cari kode <div id="content-wrapper">
7. Lalu pasang 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://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>
8. Simpan Template dan lihat hasilnya

Keterangan:
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
  • Ganti tulisan berwarna Biru (Edit me / Submenu) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
  • Untuk mengubah panjang menubar bisa sobat ganti tulisan 920px menjadi sesuai dengan keinginan sobat
  • Untuk mengganti warna menubar, coba cari kode background:#de360f; . Ganti kode yang berwarna orange dengan kode warna yang diinginkan. Cek Disini
  • Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
  • Bila kode <div id="content-wrapper"> tidak ada, coba ganti dengan <div id="header-wrapper"> atau <div id="outer-wrapper">
Nah, itu semua merupakan tutorial bagaimana cara membuat menubar dengan search box. Oke sobat reggy, reggy sudahi sampai disini dulu ya.
Cara membuat Menubar dengan search box
Writter: Reggy Zian Purnama
DMCA.com Orang pandai tau tata krama. Dilarang copy paste artikel tanpa seizin penulis!

92 comments Skip to comments

Wah, artikel yang sangat bagus mas. Ngomong-ngomong templatenya juga bagus, karena terinspirasi kang rohman ya mas :) pastinya, hehe :D Kunjung balik ya mas.

makasih gan, iya sih headernya yg terinspirasi :D oke gan, ntar saya main ke blog agan ;)

mantab gan..tapi ane udah ada..

bermanfaat banget neh,di save dulu ya..

makasih gan tutornya, sy suka ama search box nya :)
Oya, gimana cara bikin kotak koment seperti diatas gan? Yg ada tulisan authornya?

kode div id="content-wrapper "di blog q koq tidak terdapat ya?

mohon solusi nya..

Terimakasih informasi nya gan, sangat bermanfaat :)
nice post :)
ditunggu kunjungan baliknya yaah ,

Thanks yaa gan atas tutorialnya.
Salam kenal :D

tutorialnya menarik dan mudah dipahami..terimakasih sudah berbagi sobat :)

keren menunya sobb,, ijin pakeee menu ini yahh...

om kode langkah no 6 nya gk ada pie ki

kalau gaada coba ganti dengan kode div id="header-wrapper"

coba ganti dengan kode div id="header-wrapper"

gan, cara bikin menu dropdownnya bercabang lagi gimana ya?

Kalo gak ada div id="content-wrapper" cari div id='content-wrapper'
CMIIW

Kalau menubar bawaan dari template third party yang kita download, selalu error tidak berfungsi sebagaimana mestinya itu kenapa ya mas ?
Terimakasih untuk pencerahannya. O iya sekalian untuk sobat-sobat disini saya ucapkan Selamat Hari Raya Idul Fitri 1 Syawal 1433H. Minal aidzin Walfaidzin.. Mohon maaf lahir dan batin....
Salam Fitri ^_^

content wraper sama header wrapper gak ada gimana suhu??

Mau ikutin nerapin ilmunya bos. Makasih Boz moga2 banyak pahala

gan gua udh nyari div id="content-wrapper " sama div id="header-wrapper" tp kok ga ketemu ya? tolong dibantu gan

di template official blogger memang gaada kode gitu gan, alternatifnya taruh kodenya di bawah kode </header>

gan ane kan lebarin tuh menu nya jadi 1000px tapi kenapa yang melebar hanya pada bagian kanan saja sedangkan kiri engga membuat blog menjadi tidak seimbang mohon pencerahannya

maksudnya ingin disamakan dengan menubar yg di bawah ?
coba ubah widthnya menjadi 100% (bukan px), lalu hapus auto pada margin:0px auto;

nitip blog nubie masta <a href="lensa-kabar.blogspot.com>BLOG NEWBIE</a>

wahh mantap gann..mapir k sini juga ya
Mapirr YAA jangan LUPA

tukeran link sekalian gan hehehe..
Tambah Ilmu & Pengetahuan

Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya maksudnya apa gan aku enggak ngerti

gan menubarnya sudah berhasil tapi sekarang saya bingung maksudnya Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya, itu apa ya ?

Thanks gan :D

izin nerapin kawan. kl ada yg slh tar tolong d bantu ya kawan.
makasih kawan sebelumnya...

Gan,, saya sudah menerapkan tapi saya kesulitan untuk menghapus menu bar bawaan template y,,sudah saya hapus dan Nevbar y sudah d off tpi tetep aja muncul d blog...Gimana cara menghapus y??
Mohon pencerahannya..

Thanks Gan...

coba cari <div class="second-row">, lalu hapus sampai dengan kode </div>

agar tampilannya lebih bagus, ubah lebar menubar dengan mengganti #menubar{ width:900px; tulisan yg bercetak tebal di samping dengan ukuran header (agar sesuai)

bagaimana cara mengatasi kalau kode yang diata/ditunjukkan sobat tidak ada?

maksudnya gan Reggy taruh code yang item no 7 itu di bawah ?????, atau taruh di bawah iv id="header-wrapper" yang kita tidak miliki?

mohon pencerahannya gan?

Siip, bisa Gan..! Sukses!


Buat Agan yang lain kalau script yang dibawah gak ketemu mulu, coba deh dihapus petik duanya, jadi yang asalnya " jadi ', begitu.

"content-wrapper" jadi 'content-wrapper'

pasti ketemu

haha, agan ini bener. karena di setiap template berbeda-beda, ada yg menggunakan tanda kutip " dan ada juga yg '

intinya agar tidak kebingungan, cari saja berdasarkan content-wrapper :)

klo gak ada juga, boleh di taruh di atas elemen mana saja, misalkan header atau lainnya

maksudnya, copy kode di dalam scroll box yg terdapat di no 7, lalu pastekan di div id='header-wrapper'

atau bila tidak ada bisa di paste di atas kode div id='content-wrapper' :)

bang, gimana cara nambah sub menunya tu ?
saya dah bisa buat menubarnya tapi submenunya kurang banyak
thx infonya

wah kebetulan nih, mumpung lagi belajar bloging

kadang2 edit html sering gagal itu kenapa ya??

wah susah juga ya pa lagi kayak q ini yg ga paham coding

terima kasih sob ., keren navigasinya :D

diblog gue gak ada sob ke tiganya, baik yang ini "content-wrapper" atau ini "header-wrapper" juga ini "outer-wrapper", sekali pun gue ganti tanda (") jadi (') juga gak ada gan -____-

coba taruh di atas atau di bawah kode <div class='header-cap-bottom cap-bottom'> gan

sob kalo kotak search blog ku tidak bisa di ketik, itu knpa ya.?

oiya nyari template yg simpel kya gni di mana ya ::)

info yang bermanfaat gan, terimakasih gan.
jangan lupa mampir blog ane .

mantap, ijin pasang diblog ya gan
terima kasih

kalo gk ada ini
id="content-wrapper"> dan
id="header-wrapper"> atau id="outer-wrapper">....
gmna...?

gan dib blog sya gak kode id="content-wrapper">
jadi saya paste ke kode yg mana nih gan.
mohon bantuan nya.

Bro , aku mnta bntuan ..
aku pngen buat panjang menunya full dari kiri ampe ke kanan jadi kyk bang reggy punya deh :)
mohon pencerahannya bro ..
btw trima kasih sebelumnya

sangat bermanfaat bang reggy, simak saja saya. semoga jadi tambah maju blog nya :-bd
oh iya sob jangan lupa berkunjung keblog saya ya

div id="content-wrapper" aku kuk cari itu gak ada yah bang

Alhamdulillah berhasil,kunjungi blog ane gan

gan punya ane pas uda di save kok jadi 2 pagenya..
page laman (menubar) yg g ada search box dan Dropdown + menu bar yang bru aku edit di html???
gimana ni biar yg bawaan bisa hilang dari muka bumi ini.. hehehee

coba mampir kesini : http://pika2distro.blogspot.com/

coba tanda (") duanya d ganti (') satu

Bro, kok punya ane munculnya jadi di atas yak?biar agak kebawah kaya punya ente gmn caranya bro??

mkasih gan,, ngbantu bngt bwt ane yg msh pemula,,, mantap deh,,

gan.... cara ngedit menu subnya gimana? gue udah bisa. tapi gue mau pake 4 menu bar aja. terus gimana caranya? gue hapus script menu bar yg gue ga gue perluin gitu?

Thanks gan... akhirnya udah bisa gue otak atik sendiri :-)

This comment has been removed by the author.

kalau cara masukin artikel postingan ke menu bar nya gmn? tksh

bang mau nanya kenapa kode div id="content-wrapper" tidak ada di blog ane. soalnya udah saya lihat di html ane satu persatu tapi ngak ada juga
mohon pencerahannya atau ada ngak kode lain yang bisa saya pakai bang

kunjungin http://hasil2.blogspot.com/

bang,cara supaya penuh satu halaman kayakpunya bg reggy gmana ya?

gan klo menu navigasinya mau dibuat bercabang lagi gmna caranya??

wah mantap gan, keren, bisa langsing dicoba

cara agar tampilan {seach) dipojok kanan gmana gan

gan, mau nanya. punya saya udah ada menubar dan sub menu-nya. kalo mau nambahin search box-nya aja caranya gimana? saya copas yang bagian < div id='menubar-right' >< div id='search-t' >, sampai akhir. Malah jadinya search box ada di bawah menu bar dan nggak bisa di klik. Mohon penjelasannya. terima kasih

susah begete nyarinyaaaaaaaaaa :(
hampir putus asa saya

mantab gan menubar searchbox nya, kalau mau ganti warna gimana ya gan?

Makasih gan untuk informasinya, sangat membantu :)
http://grosiracemaxstasik.com/

Terima kasih Infonya Bro, izin ikut menerapkan ya. hehe

Informasi Lowongan Kerja Terbaru BUMN, BANK, Persero, Swasta, & Berbagai Perusahaan Besar di Indonesia : http://expocpnsbumn.blogspot.com/

Mas Reggy Thanks, awalnya saya gak nemu scrif : id="header-wrapper"> atau id="outer-wrapper"> tapi setelah saya coba masuk2kan aja sendiri (coba-coba) berhasil,. :)
mohon kunjuan kembali mas http://kageed.blogspot.com

Makasih sob untuk informasi tutornya :)
http://goo.gl/I7YrK4

makasih banyak buat infonya,,

http://goo.gl/vg9SKo

terimakasih banyak sob, sangat membantu

http://tokoonlineobat.com/obat-jantung-bocor-alami/

gimana cara mengatur letak menu bar nya?supaya gak terlalu ketengah

Thanks gan untuk informasi artikelnya :)
http://goo.gl/fSVyKh

gan gmn caranya biar menu searchnya di pojok kanan ga di tengah?

gan agar kotak menu bar bisa melengkung gimana caranya?

Berkomentarlah dengan baik dan sopan. Dilarang oot dari artikel diatas. Komentar yang menyertakan link aktif maupun statis termasuk promosi akan langsung kami hapus.
Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon