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.
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 :
- -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. - height:30px adalah tinggi kotak navigasi.
- 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..
Selamat mencoba ya..have a nice day !
|
Tweet
|
Berlangganan artikel terbaru via Email
|
24 comments
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...
@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..
thcks tutorialnya bos
thx buat tutorialnya yah..
nice info..
wah info yang menarik :) salam kenal semoga kita bisa berbagi lebih banyak :)
artikel yang bagus :) ditunggu lho tutorialnya yang lain :)
salam saya
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..
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..
@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
Tipsnya mantabbbbb.. Thanks.
Sip dah ilmunya. Makasi bos.
mantap bos tipsnya
artikel yang sangat menarik bro. kami tunggu artikel-artikel mendidik lainnya..
waduh...kotak Qomentarnyah baru nih, kemaren2 kok enggak ginih...hmmm...jd penasaran...xixixi emot2nyah iyang dweh...hohohoho
info baru terus nich, lama tidak berkunjung kesini, soalnya lagi sibuk. sukses yaaa
Wah..bagus nih tutornya...
Lumayan buat referensi...
Ntar bakal gue coba, thx! :)
Sippp....
bagaimana cara nya membuat menu navigasi itu menjadi 2 yang kayak blognya mas dody ini yang saya kog malah gak bisa
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 ^_^
@ArhiezOne : letakkan saja dibawah <body>
@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 ^_^
wah!!
Dari tadi nih qw cari artikel ini, agar bisa lebih memvariasi blog qw
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
Posting Komentar