Panduan Membuat Menu Navigasi Horizontal + Kotak Pencari

Posted by Herman on Tuesday, May 05, 2009 40 comments

Kemarin ada yang menanyakan kepada saya bagaimana cara membuat menu navigasi yang ada tulisan home, paypal, contact me seperti pada blog saya. Hmm.. sebenarnya menu tersebut sudah disediakan dari templatenya. Dan kebanyakan template baru sekarang sudah menambahkan menu tsb. Tapi bagi anda yang templatenya tidak menyediakan menu tersebut, anda juga bisa menambahkan sendiri dengan sedikit modifikasi pada css template anda.

Pada postingan ini, saya akan menjelaskan cara membuat menu navigasi yang dilengkapi dengan kotak pencari seperti ini.

menu navigasi horizontalBagi anda yang tertarik, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke menu blogger. Klik Design -> Edit HTML

2. Backup template anda

3. Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>

/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px;/* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}

#nav-left{
float:left;
display:inline;
width:580px
}

#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}

#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
Arial,Helvetica,sans-serif;
font-weight: bold;
}

#nav ul li{
float:left;
list-style:none
}

#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}

#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}

#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(http://lh3.ggpht.com/_15FopxVONSo/THEhOlDrX4I/AAAAAAAAD28/5oYAsTcO0G8/search-icon.gif) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
}

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
Keterangan:
Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.

Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kode url(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:
background: #1c426d
url(http://url-gambar)
;

4. Setelah itu cari kode seperti dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Herman Blog (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
Cari kode di template anda yang paling mendekati dengan kode diatas

5. Kalau sudah ketemu, letakkan kode berikut dibawahnya.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' 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 id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
6. Sehingga susunannya menjadi seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Herman Blog (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' 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 id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

7. Kalau sudah, Save Template lalu lihat hasilnya.

Jika anda tidak mau menggunakan kotak pencari tinggal hapus kode yang dicetak tebal. Beres..

Untuk menambah link pada menu navigasi. Buka menu Page Element lalu klik Edit pada "Top Tabs". Tambahkan link yang ingin anda tampilkan disana.

Ok. Selamat mencoba. Semoga bermanfaat.


Recent Posts:

40 comments

Blok c No.3 said... 07 May, 2009
mantap sob....artikelnya selalu berguna...
thanks.
Herman said... 07 May, 2009
@blok c no 3: makasih juga sob uda beli pertamaxx disini :D
EK4zone said... 08 May, 2009
Wahhh seep ini om.. :D
Seti@wan Dirgant@Ra said... 22 May, 2009
TERIMA KASIH SAHABAT,.....
B Gio Lho said... 05 June, 2009
@...Malam Bozz.., nah ini yg ane cari2 Bozz..
..Thank'z...Ane coba dulu deh..
bullirus said... 20 October, 2009
mas ada sedikit pertanyaan nih...jika kita posting tulisan kita dan ingin ditempatkan pada sub menu yang ada (related post) gimana caranya?. makasih sebelumnya.
Dik's Blog said... 20 November, 2009
halo mas, saya coba bkin navigasi ama search box itu, kok error katanya code ny?
ganool said... 28 November, 2009
waddooohhh...
susah juga ternyata...
SUHARJO said... 22 December, 2009
http://suharjo21.blogspot.com/

bagaimana caranya memasukan postingan ke dalam navigasi menu, susah,,yang tau kirim ke roomajo@gmail.com
Elin Rose said... 20 February, 2010
kok malah nampilnya gak di menu navbarnya??
Hariri Axlrose said... 22 March, 2010
Mas kok saat mengcopy paste kode tsb (Menu navigasi horizontal), saya bingung dimana ya mencari kode buat ngasih nama dari tmbol navigasi tsb(misalnya, "Home") dan kode bwat masukkin alamat linknya....? please di jawab? (atau E-mail: Hariri.axlrose@gmail.com)
boys before flowers said... 19 May, 2010
wah kodenya banyak banget mas, jadi bingung, punuya yang lebih simpel gak?
boys before flowers said... 19 May, 2010
thanks bro . . salam kenal :)

http://melodacomputer.blogspot.com
http://mayyu-healthy.blogspot.com
http://cellularmobile9.blogspot.com
http://japanchord.blogspot.com
http://indocomics.blogspot.com
arhiezone said... 18 June, 2010
mau tanya dunk mas herman, gimana cara bikin kotak search untuk mencari potingan di blog kita ?

thanks b4
herman said... 18 June, 2010
@arhiezone: coba baca disini

http://hermanblog.com/2008/11/cara-menambahkan-search-box-atau-kotak.html
Arhiez said... 21 June, 2010
oke ^_^
Serj. Omend said... 07 July, 2010
wah pasti bakalan banyak nyita waktu nie kalo disesuai in ma navbar q... coz cuman mw masang search barnya duang..., kira-kira bisa gak ya???
bantuin dong kang...
di blog ane...
http://planetto.blogspot.com/
...
Sementara ane bookmark dulu ...
Terimakasih lagi...
computer word said... 16 October, 2010
thank sob infonya sangat membantu...n tambah pengetahuan...
aGus_iki said... 31 October, 2010
punyaku udah ada sob..
Tapi ini bisa diaplikasikan ke template classic kan?
http://top-rekomendasi.blogspot.com/ said... 20 November, 2010
makasih mas, mau tanya nih. saya pake template yg udah ada menu navigasinya.tp ukuran height nya terlalu tinggi. kemudian saya tambah height:20px; hasilnya adalah benar menjadi kecil, tapi kenapa text nya ikut kepotong?? saya pake template Template By Nano Yulianto biasa.
arie cracker said... 23 November, 2010
makasih banyak mas...
tapi aq bingung n masih blank masalah bahasa pemrograman..jadinya aq bingung ngeditnya..
tlong di bantu ya mas. jwbannya kirim ke e-mail aq. ntar kode htmlnya aq kirimin by e-mail.. n sebelumnya makasih banyak atas penjelasannya..
Ilmu Pengetahuan Internet said... 16 January, 2011
artikel gk siip apaan nih ganggu blog aku
str00m said... 20 February, 2011
bang Herman kenapa ya kok setelah di save muncul tulisan:
Lebih dari satu widget ditemukan dengan id: LinkList1. ID Widget seharusnya unik.

mohon solusinya :)
sahrulapaaja@rocketmail.com said... 22 February, 2011
makasih ya gan....
kunjungan balik di tunggu...
adiezx said... 30 March, 2011
err Lebih dari satu widget ditemukan dengan id: LinkList1. ID Widget seharusnya unik. gmn nich solusinya?????
Naj said... 31 March, 2011
ko gak bisa eaaa bikin menu navigasinya,, HTML-nya gak bisa ngebaca :((
clinic17plus said... 12 April, 2011
Kang dah aq coba dan berhasil dari tata letaknya,.. tapi fungsi searchnya ko gak bisa yah. kotak search di tulis ga bisa, juga buttomny di klik ga bisa, neh http://clinic17.blogspot[dot]com
clinic17plus said... 12 April, 2011
oke banget kang,......... hampir semua dari blog saya pengaruhnya dari tutorialnya kang herman,.. dan semua berfungsi baik. tapi kali ini kang. form search, dan buttonmny ga jalan. please diliat bentar http://clinic17.blogspot[dot]com kang?
streamingtv said... 15 July, 2011
menyegarkan dan sangat membantu, kang. Trims :)
ItsMe said... 07 September, 2011
Ini ada contoh horizontal menu, vertical menu atau dropdown menu, tinggal download ajaa
www.designedmenus-d.blogspot.com
belajar bisnis said... 18 September, 2011
thanks gan cocok bgt n sukses di template q meski puter otak cari posisi yg pas...alhamd ketemu n bisa tak pakai trims.... :D kunjungi juga gpkonline.blogspot.com
Riozkd said... 09 November, 2011
binggung ane gan
I My Me Mine said... 12 November, 2011
Makasih ya kang, kunjungi blog aku juga ocre..
Multiplusinfo.blogspot.com
mh-bayu said... 01 December, 2011
nuhun kang,,thema bawaaan blogger gk ada menunya
teknologikomputer9 said... 25 July, 2012
mas herman kenapa pada script header-wrapper punya saya kagak ada ya mas?? :) 8-}
ҒдӉяїzдL ѕҫядємїлб dєдтђ мєтдӏ said... 06 August, 2012
kalau tidak di back up bisa nggak ?
back up itu caranya gimaana ?
Roxer4 said... 15 September, 2012
DOWNLOAD FREE REGISTERED SOFTWARE,MOVIES AND GAMES
fchords said... 07 October, 2012
Bro bisa buat menu navigasi kayak di Indowebster gk??
Itu yang floating dan hovernya bekerja saat di scroll ke bawah..
Kayak gambar yg ada di link ini bro..

1.Gambar Sebelum Di Scroll Ke Bawah
2.Gambar Sesudah Di Scroll Ke Bawah

kloq bisa share donk, email saya cnambiexz@yahoo.com atau twitter saya @Cah_Gembloengz thanks...
InuyashaNaruto said... 29 October, 2012
susah error trussss.......
magazineers said... 03 November, 2012
mas code no 4 nggak ada je,, gimana mas,, tolong pencerahannya...

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment