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{6. Selanjutnya, cari kode <div id="content-wrapper">
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;
}
7. Lalu pasang kode di bawah ini, di atas kode <div id="content-wrapper">
<div id='menubar'>8. Simpan Template dan lihat hasilnya
<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 == "") {this.value = "Cari artikel disini..";}' onfocus='if (this.value == "Cari artikel disini..") {this.value = ""}' 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>
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">
Wah, artikel yang sangat bagus mas. Ngomong-ngomong templatenya juga bagus, karena terinspirasi kang rohman ya mas :) pastinya, hehe :D Kunjung balik ya mas.
ReplyDeletemakasih gan, iya sih headernya yg terinspirasi :D oke gan, ntar saya main ke blog agan ;)
Deletemantab gan..tapi ane udah ada..
ReplyDeletediv id="content-wrapper" aku kuk cari itu gak ada yah bang
Deletesama mas nyari itu gk nemu"
DeleteSMA ENA JUGA GAKK NEMUIN
Deletesama ane juga ga nemu gagal dach
Deletesama gue juga gak nemu
Deletebermanfaat banget neh,di save dulu ya..
ReplyDeletemakasih gan tutornya, sy suka ama search box nya :)
ReplyDeleteOya, gimana cara bikin kotak koment seperti diatas gan? Yg ada tulisan authornya?
kode div id="content-wrapper "di blog q koq tidak terdapat ya?
ReplyDeletemohon solusi nya..
kalau gaada coba ganti dengan kode div id="header-wrapper"
Deletegan gua udh nyari div id="content-wrapper " sama div id="header-wrapper" tp kok ga ketemu ya? tolong dibantu gan
Deletedi template official blogger memang gaada kode gitu gan, alternatifnya taruh kodenya di bawah kode </header>
Deletemaksudnya gan Reggy taruh code yang item no 7 itu di bawah ?????, atau taruh di bawah iv id="header-wrapper" yang kita tidak miliki?
Deletemohon pencerahannya gan?
maksudnya, copy kode di dalam scroll box yg terdapat di no 7, lalu pastekan di div id='header-wrapper'
Deleteatau bila tidak ada bisa di paste di atas kode div id='content-wrapper' :)
gan dib blog sya gak kode id="content-wrapper">
Deletejadi saya paste ke kode yg mana nih gan.
mohon bantuan nya.
Terimakasih informasi nya gan, sangat bermanfaat :)
ReplyDeletenice post :)
ditunggu kunjungan baliknya yaah ,
Thanks yaa gan atas tutorialnya.
ReplyDeleteSalam kenal :D
tutorialnya menarik dan mudah dipahami..terimakasih sudah berbagi sobat :)
ReplyDeletekeren menunya sobb,, ijin pakeee menu ini yahh...
ReplyDeleteijin nyoba gan
ReplyDeleteom kode langkah no 6 nya gk ada pie ki
ReplyDeletecoba ganti dengan kode div id="header-wrapper"
Deletegan, cara bikin menu dropdownnya bercabang lagi gimana ya?
ReplyDeleteKalo gak ada div id="content-wrapper" cari div id='content-wrapper'
ReplyDeleteCMIIW
Kalau menubar bawaan dari template third party yang kita download, selalu error tidak berfungsi sebagaimana mestinya itu kenapa ya mas ?
ReplyDeleteTerimakasih 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??
ReplyDeleteMau ikutin nerapin ilmunya bos. Makasih Boz moga2 banyak pahala
ReplyDeleteterimakasih infonya gan..
ReplyDeletekurang lengkap bro...ajari lah
ReplyDeletegan 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
ReplyDeletemaksudnya ingin disamakan dengan menubar yg di bawah ?
Deletecoba 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>
ReplyDeletewahh mantap gann..mapir k sini juga ya
ReplyDeleteMapirr 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
ReplyDeletegan 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 ?
ReplyDeleteThanks gan :D
izin nerapin kawan. kl ada yg slh tar tolong d bantu ya kawan.
ReplyDeletemakasih 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??
ReplyDeleteMohon pencerahannya..
Thanks Gan...
coba cari <div class="second-row">, lalu hapus sampai dengan kode </div>
Deleteagar tampilannya lebih bagus, ubah lebar menubar dengan mengganti #menubar{ width:900px; tulisan yg bercetak tebal di samping dengan ukuran header (agar sesuai)
cara yang baik & bagus
ReplyDeletebagaimana cara mengatasi kalau kode yang diata/ditunjukkan sobat tidak ada?
ReplyDeleteSiip, bisa Gan..! Sukses!
ReplyDeleteBuat 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 '
Deleteintinya agar tidak kebingungan, cari saja berdasarkan content-wrapper :)
klo gak ada juga, boleh di taruh di atas elemen mana saja, misalkan header atau lainnya
bang, gimana cara nambah sub menunya tu ?
ReplyDeletesaya dah bisa buat menubarnya tapi submenunya kurang banyak
thx infonya
wah kebetulan nih, mumpung lagi belajar bloging
ReplyDeletesip deh artikelnya, sangat membantu
ReplyDeletekadang2 edit html sering gagal itu kenapa ya??
ReplyDeletethanks gan artikelnya
ReplyDeletewah susah juga ya pa lagi kayak q ini yg ga paham coding
ReplyDeleteterima kasih sob ., keren navigasinya :D
ReplyDeletediblog 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 -____-
ReplyDeletecoba taruh di atas atau di bawah kode <div class='header-cap-bottom cap-bottom'> gan
Deletesob kalo kotak search blog ku tidak bisa di ketik, itu knpa ya.?
ReplyDeleteoiya nyari template yg simpel kya gni di mana ya ::)
info yang bermanfaat gan, terimakasih gan.
ReplyDeletejangan lupa mampir blog ane .
mantap, ijin pasang diblog ya gan
ReplyDeleteterima kasih
kalo gk ada ini
ReplyDeleteid="content-wrapper"> dan
id="header-wrapper"> atau id="outer-wrapper">....
gmna...?
coba tanda (") duanya d ganti (') satu
Deletemksih tutorialnya :)
ReplyDeleteTerima kasih
ReplyDeleteBro , aku mnta bntuan ..
ReplyDeleteaku 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
ReplyDeleteoh iya sob jangan lupa berkunjung keblog saya ya
Alhamdulillah berhasil,kunjungi blog ane gan
ReplyDeletegan punya ane pas uda di save kok jadi 2 pagenya..
ReplyDeletepage 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/
Bro, kok punya ane munculnya jadi di atas yak?biar agak kebawah kaya punya ente gmn caranya bro??
ReplyDeletemkasih gan,, ngbantu bngt bwt ane yg msh pemula,,, mantap deh,,
ReplyDeletegan.... 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?
ReplyDeleteThanks gan... akhirnya udah bisa gue otak atik sendiri :-)
ReplyDeleteThis comment has been removed by the author.
ReplyDeletekalau cara masukin artikel postingan ke menu bar nya gmn? tksh
ReplyDeletebang 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
ReplyDeletemohon pencerahannya atau ada ngak kode lain yang bisa saya pakai bang
kunjungin http://hasil2.blogspot.com/
Thank's MasGan....
ReplyDeletethanks tutorialnya, sangat membantu :)
ReplyDeletebang,cara supaya penuh satu halaman kayakpunya bg reggy gmana ya?
ReplyDeletegan klo menu navigasinya mau dibuat bercabang lagi gmna caranya??
ReplyDeletecara agar tampilan {seach) dipojok kanan gmana gan
ReplyDeletegan, 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
ReplyDeletemakasih gan :)
ReplyDeletesusah begete nyarinyaaaaaaaaaa :(
ReplyDeletehampir putus asa saya
mantap mas
ReplyDeleteterima kasih tutorialnya
mantab gan menubar searchbox nya, kalau mau ganti warna gimana ya gan?
ReplyDeleteMas Reggy Thanks, awalnya saya gak nemu scrif : id="header-wrapper"> atau id="outer-wrapper"> tapi setelah saya coba masuk2kan aja sendiri (coba-coba) berhasil,. :)
ReplyDeletemohon kunjuan kembali mas http://kageed.blogspot.com
Makasih sob untuk informasi tutornya :)
ReplyDeletehttp://goo.gl/I7YrK4
makasih banyak buat infonya,,
ReplyDeletehttp://goo.gl/vg9SKo
terimakasih banyak sob, sangat membantu
ReplyDeletehttp://tokoonlineobat.com/obat-jantung-bocor-alami/
gimana cara mengatur letak menu bar nya?supaya gak terlalu ketengah
ReplyDeleteThanks gan untuk informasi artikelnya :)
ReplyDeletehttp://goo.gl/fSVyKh
gan gmn caranya biar menu searchnya di pojok kanan ga di tengah?
ReplyDeleteThanks gan ilmunya :-)
ReplyDeletegan agar kotak menu bar bisa melengkung gimana caranya?
ReplyDeleteKumpulan MEnu yang palink keren dan terbaru 2017 sini gan masuk http://bit.ly/2nxWSiL
ReplyDeleteDaftarkan Diri Anda Sekarang Juga Di www.bolacasino88.com Agen Judi Online Terpercaya Di Asia.
ReplyDeleteUntuk 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
ReplyDeletehttp://shareitapk.moonfruit.com/
https://shareitapk.bookmark.com/
http://shareitapk.manifo.com/