Selasa, 05 Januari 2010

Cara Membuat Navigasi Dropdown Menu


Pada postingan yang lalu, saya sudah pernah membahas tentang cara membuat navigasi menu. Nah, pada postingan kali ini, kita akan membahas tentang cara membuat navigasi dropdown menu. Yaitu navigasi menu yang jika mouse berada di atas navigasi menu tersebut akan keluar submenu-submenu lainnya. Contohnya seperti gambar diatas.

Bagaimana? Menarik bukan? Begini cara membuatnya.

Pertama-tama login dulu ke Blogger. Lalu klik Tata Letak > Edit HTML. Oh,ya. Jangan lupa backup dulu templatenya.

Sudah siap? Lakukan langkah-langkah dibawah ini.

1. Cari kode berikut.
]]></b:skin>
2. Lalu letakkan kode berikut ini.
/*--Navigasi Dropdown Menu--*/
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:580px;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:black; /* Warna teks saat kursor mouse berada di atasnya */
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
visibility:hidden;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:black; /* Warna latar belakang submenu */
width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul{
left:auto;
visibility:visible;
}
Oh,ya. Apabila anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.

3. Cari kode yang mirip dengan kode dibawah.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='C A Minor D Minor ke G ke C Lagi (Header)' type='Header'/>
</b:section>
</div>
4. Dibawahnya, ketikkan kode berikut.
<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a href='http://muhammadrizkifadillah.blogspot.com'>Home</a></li>
<li><a href='http://muhammadrizkifadillah.blogspot.com/search?max-results=1000'>Daftar Isi</a></li>
<li><a href='#'>Other Blogs</a>
<ul>
<li><a href='http://allaboutmusicishere.blogspot.com'>Info Musik</a></li>
<li><a href='http://beritaduniamaya.blogspot.com'>Berita Dunia Maya</a></li>
<li><a href='http://siapayangpantas.blogspot.com'>Belajar SEO</a></li>
</ul>
</li>
</ul>
</div>
Gantilah tulisan http://muhammadrizkifadillah.blogspot.com dengan link yang anda inginkan dan gantilah tulisan Home dengan tulisan yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.

5. Klik Simpan Template.

6. Lihat hasilnya.

Apabila anda bingung, jangan ragu dan takut untuk bertanya. Caranya komen saja dibawah.


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



9 komentar:

SMA MUHAMMADIYAH PAKEM mengatakan...

langakh nomer 2 meletakkannya setelah atau sebelum kode ]]>

Ramdhan mengatakan...

SIP

Junior Blogger mengatakan...

salam Kenal ya...?

free onlinejobs mengatakan...

slam kenal brader >_<

MIS Al-Khairiyah Gerem V mengatakan...

ikut bertanya bang.. pada blog aku..hasilnya gak bisa muncul saat mouse lewat. malah udah nampak semua.
Conto Scipnya seperti ini yang ada...

Martin Zulkarnain mengatakan...

thx ilmunya, pas bngt dng apa yg gw lg cari2....

pondok ecotani mengatakan...

gan ane berhasil bwt navigasi drpdown tp gan ane mau nambah menu," kyk others blog," error terus gan, jd gmn caranya..? mhn penecerahannya, krm via email aja gan ecotani01@gmail.com, tq

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.