Menu Navigasi Horizontal

Sebelum ini pernah saya bahas tentang tutorial horizontal menu dropdown, kurang lebih sama dengan menu navigasi horizontal. Hanya saja dalam menu navigasi ini, sobat tidak perlu lagi masuk ke kode HTML template jika ingin menambahkan link baru. Namun kekurangan menu navigasi horizontal ini adalah tidak bisanya menambah link baru kebawah (vertikal) atau sub menu seperti pada horizontal menu dropdown.

 

menu

 

langsung saja pada pembuatannya ya. Sip, sekarang silahkan sobat Login ke blogger dulu, kemudian tuju Elemen Halaman, lalu klik button Edit HTML, klik Expand Template Widgets.

 

Letakkan kode css berikut ini diatas kode ]]></b:skin>

/*-- (Menu/Nav) --*/
#nav{background:#000; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}
#nav-left{float:left; display:inline; width:700px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:13pt comic sans ms,arial,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

 

Kamudian letakkan kode berikut ini tepat dibawah kode <div id='outer-wrapper'><div id='wrap2'> kode ini biasanya letaknya dibawah <body>

<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:section>
</div>

Jangan lupa Simpan Template. Coba lihat hasilnya !

 

 

Keterangan :

  1. -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px

    adalah garis melengkung pada ujung kotak navigasi, semakin besar angkanya maka akan semakin besar garis lengkungnya. Jika ingin membuat kotak lancip, silahkan hapus saja semua kode tersebut.

     

  2. height:30px adalah tinggi kotak navigasi.

     

  3. Background:#000 adalah warna kotak navigasi, untuk merubah dengan warna lain silahkan klik disini. Dan jika ingin mengganti warna dengan gambar yang sobat punya, ubah kodenya sehingga menjadi seperti berikut :

    #nav{background:#000 url('http://lh6.ggpht.com/_7Y9pl24WpQY/StGMv1nlCvI/AAAAAAAAB4U/RmIZGEvqvHA/gradient.php_thumb%5B2%5D.jpg?imgmax=800') repeat-x; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}……………………………………………………….…………………………………………………………………………………………………………………………………………………………………………………………………………………….. dst..
    alamat gambar diatas hanya contoh yang saya punya, jika ingin melihat gambarnya silahkan sobat block url gambar diatas kemudian masukkan ke address pada browser sobat dan enter, jreeng keliatan kan gambarnya. Silahkan jika ingin menggunakan gambar diatas atau jika punya gambar sendiri, monggo !

Jika berhasil maka menu navigasinya terletak di bagian paling atas header. Jika ingin meletakkan menu navigasi dibawah header maka yang harus sobat lakukan adalah merubah letak posisi <div id='outer-wrapper'><div id='wrap2'>, cut dan paste setelah kode header atau jika bingung maka letakkan saja tepat diatas kode

 

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

 

Maka hasilnya akan seperti yang ada di blog ini, cuih om dody pamer nih..Hot

Selamat mencoba ya..have a nice day !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

24 comments

17 Oktober 2009 06.13

makasi infonya...
emang lagi pengen kayak gitu neeh...
btw soal "alexa rank", blog Q kok ngikut rank punya blogger?
jadinya blom apa** udah dapet rank #7...
kan ga enak ama yang laen...

17 Oktober 2009 10.01

@newbie_blogger : klo soal alexa rank, memang blog br pasti peringkat alexa msh sama dgn blogger..sering update artikel and ikut social bookmark biar blog terkenal sob..

17 Oktober 2009 22.55

thcks tutorialnya bos

18 Oktober 2009 20.36

thx buat tutorialnya yah..

nice info..

19 Oktober 2009 13.13

wah info yang menarik :) salam kenal semoga kita bisa berbagi lebih banyak :)

19 Oktober 2009 13.16

artikel yang bagus :) ditunggu lho tutorialnya yang lain :)
salam saya

20 Oktober 2009 14.16

Waaoooww...kereeen bangat uuyyy..langsung ke TKP..tampilan blognya jg kereen..nyoba pake susah banget ngeditnya..pusiiing..maklum baru belajar hehehe...salam hangat dari bloger pangandaran..

20 Oktober 2009 16.54

Nambah dikit...pas mau buat menu navigasi horizontal kode tidak unik padahal sudah berkali-kali di edit sesuai dengan wangsit diatas..mohon pencerahannya..templateku pake yang Red-H...makasih banget..

20 Oktober 2009 17.16

@amor cbr : hehe dasar si amor ga teliti asal pake template aja, ga usah di edit2 lagi tinggal pasang aja linknya..coba ke --> elemen halaman trus perhatikan bagian aatas ada tulisan link list, nah di klik aja atus editnyatinggal masukkan aja deh link2mu..beress

22 Oktober 2009 14.43

Tipsnya mantabbbbb.. Thanks.

22 Oktober 2009 19.32

Sip dah ilmunya. Makasi bos.

23 Oktober 2009 08.28

mantap bos tipsnya

23 Oktober 2009 12.57

artikel yang sangat menarik bro. kami tunggu artikel-artikel mendidik lainnya..

23 Oktober 2009 23.40

waduh...kotak Qomentarnyah baru nih, kemaren2 kok enggak ginih...hmmm...jd penasaran...xixixi emot2nyah iyang dweh...hohohoho

24 Oktober 2009 01.04

info baru terus nich, lama tidak berkunjung kesini, soalnya lagi sibuk. sukses yaaa

25 Oktober 2009 23.26

Wah..bagus nih tutornya...
Lumayan buat referensi...
Ntar bakal gue coba, thx! :)

18 November 2009 16.09

Sippp....

10 April 2010 13.13

bagaimana cara nya membuat menu navigasi itu menjadi 2 yang kayak blognya mas dody ini yang saya kog malah gak bisa

5 Juli 2010 02.46

bro mau tanya dunk, ane bingung sangat nih.

di template ane gk ada tulisan < div id='outer-wrapper'>< div id='wrap2'>, jadi ane harus letakinnya dimana ??

mohon pencerahannya ^_^

5 Juli 2010 08.17

@ArhiezOne : letakkan saja dibawah <body>

6 Juli 2010 00.28

@dody : thx bro

ane mau nanya lg nih ..

stelah ane pasang readmore automatis dari tutorial di blog ini, kok page/halaman blog ane ada readmorenya juga, dan anehnya tuh page gk mau kebuka walaupun udah di klik readmorenya.

kira" masalahnya dimana yah ??

mohon pencerahannya bro, maklum ane baru belajar ngeblog 1 mgg yg lalu... hehehehe..

thx b4 yach ^_^

10 Juli 2010 15.52

wah!!
Dari tadi nih qw cari artikel ini, agar bisa lebih memvariasi blog qw

18 Juli 2010 04.23

Makasih buat tutorianya,,
saya mo tanya.. ko di template saya tidak ada tulisan < body > nya padahal saya mau paste kode yag k-2.. tolong pecerahannya..
Thanks a Lot

rekomendasi terpercaya ikut mampir gan

Poskan Komentar

Reader Community

Recent Comments