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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOFmCvOjjwojRZhPIn3REevlQ9rFot3IORhrZME8GgJKCEvz6eY_E4HVJETWlmc3dfe8NR8ZNl_ZVMjqAYsNUq3jXOaYGaGSNITD8FunfRTeC7CzCkqEvMFKZoN7jM5zfjDVWFAPOsEU/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.

93 comments:

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

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

      Delete
  2. mantab gan..tapi ane udah ada..

    ReplyDelete
  3. bermanfaat banget neh,di save dulu ya..

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

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

    mohon solusi nya..

    ReplyDelete
    Replies
    1. kalau gaada coba ganti dengan kode div id="header-wrapper"

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

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

      Delete
    4. 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?

      Delete
    5. 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' :)

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

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

    ReplyDelete
  7. Thanks yaa gan atas tutorialnya.
    Salam kenal :D

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

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

    ReplyDelete
  10. om kode langkah no 6 nya gk ada pie ki

    ReplyDelete
    Replies
    1. coba ganti dengan kode div id="header-wrapper"

      Delete
  11. gan, cara bikin menu dropdownnya bercabang lagi gimana ya?

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

    ReplyDelete
  13. 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 ^_^

    ReplyDelete
  14. content wraper sama header wrapper gak ada gimana suhu??

    ReplyDelete
  15. Mau ikutin nerapin ilmunya bos. Makasih Boz moga2 banyak pahala

    ReplyDelete
  16. 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

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

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

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

    tukeran link sekalian gan hehehe..
    Tambah Ilmu & Pengetahuan

    ReplyDelete
  19. 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

    ReplyDelete
  20. 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

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

    ReplyDelete
  22. 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...

    ReplyDelete
    Replies
    1. 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)

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

    ReplyDelete
  24. 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

    ReplyDelete
    Replies
    1. 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

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

    ReplyDelete
  26. wah kebetulan nih, mumpung lagi belajar bloging

    ReplyDelete
  27. kadang2 edit html sering gagal itu kenapa ya??

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

    ReplyDelete
  29. terima kasih sob ., keren navigasinya :D

    ReplyDelete
  30. 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 -____-

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

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

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

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

    ReplyDelete
  33. mantap, ijin pasang diblog ya gan
    terima kasih

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

    ReplyDelete
  35. 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

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

    ReplyDelete
  37. Alhamdulillah berhasil,kunjungi blog ane gan

    ReplyDelete
  38. 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/

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

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

    ReplyDelete
  41. 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?

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

    ReplyDelete
  43. This comment has been removed by the author.

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

    ReplyDelete
  45. 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/

    ReplyDelete
  46. thanks tutorialnya, sangat membantu :)

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

    ReplyDelete
  48. gan klo menu navigasinya mau dibuat bercabang lagi gmna caranya??

    ReplyDelete
  49. cara agar tampilan {seach) dipojok kanan gmana gan

    ReplyDelete
  50. 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

    ReplyDelete
  51. susah begete nyarinyaaaaaaaaaa :(
    hampir putus asa saya

    ReplyDelete
  52. mantap mas
    terima kasih tutorialnya

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

    ReplyDelete
  54. 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

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

    ReplyDelete
  56. makasih banyak buat infonya,,

    http://goo.gl/vg9SKo

    ReplyDelete
  57. terimakasih banyak sob, sangat membantu

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

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

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

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

    ReplyDelete
  61. gan agar kotak menu bar bisa melengkung gimana caranya?

    ReplyDelete
  62. Kumpulan MEnu yang palink keren dan terbaru 2017 sini gan masuk http://bit.ly/2nxWSiL

    ReplyDelete
  63. Daftarkan Diri Anda Sekarang Juga Di www.bolacasino88.com Agen Judi Online Terpercaya Di Asia.

    Untuk Registrasi Silahkan Klik Link : http://www.bolacasino88.com/index.php?page=signup

    Pelayanan Yang Professional Dan Ramah
    Di Jamin 100% Tidak Adanya BOT Dan ADMIN.

    - Minimal Deposit 20.000
    - Minimal Withdraw 50.000

    Dapatkan Hot Promo Kami Seperti :

    - Bonus Refferal Seumur Hidup
    - Bonus Sportsbook 100%
    - Cashback Sportbook 5% - 15%
    - Bonus Deposit Games 10%
    - Cashback Games 5%
    - Bonus Komisi Casino 0,8%

    NB : Syarat Dan Ketentuan Berlaku

    Nikmati 7 Permainan Dalam 1 Web Seperti:

    - Sports
    - Live Casino
    - Togel
    - Poker
    - Slot Games
    - Nomor
    - Financial

    Untuk Informasi Lebih Lengkap Silahkan Hubungi Customer Service Kami :

    - Live Chat 24 Jam Online
    - No Tlp ( +855962671826 )
    - BBM ( 2BF2F87E )
    - Yahoo ( cs_bolacasino88 )
    - Skype ( bola casino88 )
    - Facebook ( bolacasino88 Official )

    Artikel Hot : https://prediksitogelgoyangasoi.blogspot.co.id/2017/10/gawat-partai-berkarya-dirian-tommy.html

    https://prediksitogelgoyangasoi.blogspot.co.id/2017/10/rita-widyasari-kalau-saya-mati-itu.html

    ReplyDelete

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