Cara Mudah Membuat Menu Drop Down di Blog

Selamat .... sobat ZamedaKu.. hehe.. selamat apa coba? ya bisa selamat pagi, siang, sore, malam. hehe.. Sekarang waktu apa ya? tanya aja weather.com . Maaf nih agak nylenong dikit :p

Hmm.. sebelumnya sudah tau menu drop down belum? yang belum tau silakan lihat paling atas dari blog ini yang berjejer ada tulisan home, tips tricks blog, info sehat, dan lain-lain. Dan sekarang arahkan kursor anda ke tab menu tips tricks blog dan nanti pasti akan muncul seperti daftar yang turun kebawah. Nah itu yang namanya menu dropdown. Tapi jauh sebelumnya saya juga pernah share tentang cara membuat tab menu biasa (yang dulu ini tanpa menu dropdown dan biasaya lebih digunakan untuk newbie). Tapi apa salahnya mencoba cara membuat menu dropdown ini agar blog sobat terlihat lebih professional.
screenshot menu dropdown
Oia, cara ini aku dapat dari wartaberata.com. Dan cara ini menurutku cara yang paling mudah dari beberapa artikel lain yang pernah saya lihat. Saya sungguh berterimakasih akhirnya bisa memasang menu dropdown ini berkat tutorial dari kang wartabeta. Ok begini caranya..

Sebelumnya backup template duyu..

1. Login ke blogger (yang diperbarui bahasa Indonesia)
2. Masuk ke template - edit html -  centang pada expand template widget
3. Cari kode ini ]]></b:skin> (gunakan ctrl+F untuk search) lalu tepat diatasnya letakkan kode ini
#NavbarMenu {background: #555 url(http://4.bp.blogspot.com/_7wsQzULWIwo/SohCgWhkZ_I/AAAAAAAABtU/d5zb6BoMpts/s400/navbar11.png);width: 960px;height: 35px;font-size: 12px;font-family: arial, Verdana;color: #FFF;font-weight: bold;margin: 0;padding: 0;}#NavbarMenuleft {width: 710px;float: left;margin: 0;padding: 0;}#nav {margin: 0;padding: 0;}#nav ul {float: left;list-style: none;margin: 0;padding: 0;}#nav li {list-style: none;margin: 0;padding: 0;}#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font-size: 14px;font-weight:bold;font-family: sans-serif, Verdana;font-weight: bold;text-transform: none;margin: 0;padding: 9px 15px 8px;}#nav li a:hover, #nav li a:active {background: #555;color: #FFF;margin: 0;padding: 9px 15px 8px;text-decoration: none;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a, #nav li li a:link, #nav li li a:visited {background: #555;width: 200px;color: #FFF;font-size: 14px;font-family: "ms sans serif", Verdana;font-weight: normal;text-transform: none;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px dotted #7F7F7F;border-left: 1px solid #7F7F7F;border-right: 1px solid #7F7F7F;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a:hover, #nav li li a:active {background: #777;color: #FFF;padding: 7px 10px;}#nav li {float: left;padding: 0;}#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}#nav li ul a {width: 140px;}#nav li ul ul {margin: -32px 0 0 171px;}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}#nav li:hover, #nav li.sfhover {position: static;}

4. Selanjutnya cari kode ini  <div id='header-wrapper'> lalu tepat dibawahnya pastekan kode ini

contoh menu drop down untuk kode dibawah
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http//zamedaku.blogspot.com'>Home</a></li>
<li><a href='http//zamedaku.blogspot.com'>profil</a></li>
<li><a href='http//zamedaku.blogspot.com'>Blogging</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun &#187;</a>
<ul>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 1</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 2</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 3</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 4</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 5</a></li>
</ul></li>
<li><a href='http//zamedaku.blogspot.com'>Contact us</a></li>
</ul>
</div>
</div>

Untuk link warna merah rubahlah dengan link anda, untuk warna oranye rubahlah untuk nama menu-menunya.

5. Simpan. Dan lihat hasilnya....

Jika ada yang ingin ditanyakan silakan tanya lewat komentar. Jika berhasil komen juga yaa big grin
Jangan lupa di share ya :)

Artikel Terkait:

58 komentar:

i Post said...

coba dulu yah gan

Zameda Igga said...

siip.. semoga berhasil yaa..

maulamjad said...

< div id='header-wrapper'>

ndak ada kode gituan

Zameda Igga said...

@maula: cari pake keyword "div id='header" (tanpa tanda petik). Lalu cari yg hampir mirip dengan kode diatas, biasanya kode yg mirip kode itu adalah < div id='header-inner' >
semoga membantu bos ^_^

Rematik said...

Sangat berguna nih informasinya salam kenal gan....

kaki gajah said...

MAKASIH BANYAK YA GAN BUAT INFONYA

Zameda Igga said...

siiipp dahh.. ahaaa ..selamat..

kanker serviks said...

terimakasih gan atas infonya ..
manfaat bagi saya ,,
mohon kunjungi balik gan .. !!

agoestha.sigit@gmail.com said...

Mantap infonya gan..
di tunggu kunjungan baliknya gan..

Bocah Blogs said...

Thnks infox gann sanagat bermanfaat,,,
jagan lupa mapir nak blog ane yoo,,

MhyBoo said...

makasiihhh,.

sudah berhasil ^^

andrie xp said...

ko div id='header ada 3 pilhan ya, what must i do.?

Zameda Igga said...

pilih salah satu.. biasanya yg paling bawah.. coba satu2 klo ga berhasil bro..

fajar firmansyah said...

div id='header di blog aku kaga ada tolong pencerahannya.... thank's
fajar196.blogspot.com

Zameda Igga said...

maaf selebihnya dari itu saya kurang tahu.. kebanyakan template ada div id='header apalagi template bawaan blogger pasti ada.. klo ga ada mungkin templatenya yg lain atau sudah pernah km modifikasi pada daerah kode itu..

Wahyu Wusma Tswa said...

Terima kasih banyak . Saya juga masih Pemula

mau download software ,majalah atau film?
Kunjungi Blog Saya ya ? jangan lupa like nya ...hee

http://wusma.blogspot.com/

diandra humairah said...

kok gak bisa ya....
dah tak cobain < div id='header-inner' > ke 3 nya
mohon penjelasannnya gan

Zameda Igga said...

yg seperti ini memang tidak semuanya berhasil.. tergantung jenis template yg kita gunakan.
kalau template kamu tidak support cara diatas, kemungkinan besar kode2 yg lain juga tidak bisa..jadi kamu harus membuatnya sendiri dan mengerti hal2 tentang css, javascript, dkk..
Kalau benar2 ingin menggunakan menu dropdown seperti diatas cara yg paling mudah adalah mencari template yg sudah disediakan menu dropdown tersebut, lalu kita tinggal menggantinya saja..

Fairvz said...

trimz,tipsx,,coba dulu yach

Hariqul 'ushah said...

min blog ane ga nampak di google engine,
ketemunya ini
"aceh lam brita. No posts found. Subscribe. Subscribe. RSS Feed. Add to Google Reader · View RSS Feed. Loading. Send feedback."
mksudnya apa??
tlng ilmunya..???

Aninde Situmorang said...

thanks banget infonya ya... saya sudah berhasil nih, hehee
saya juga masih pemula..

Yosafat Fresh said...

mksh ya infny! soalny dr jam 10 pg samp jam 16 sy g berhsl, dan hany diblog ini sy berhsl! skl lg mksh y! Jgn lp klik link sy y! "klik link sy di sn"

Anonymous said...

ga bs ihikihikihik.......

Gabriel Fransisco said...

cuma bisa 5 menu aja hadeehhhh....

Alifia Zalna said...

ISTIMEWA

Gabriel Fransisco said...

Bisa gak kk kalo tab nya di tambahin ??
pliss jawab !!

Zameda Igga said...

maksimal 6.. tp diatas kan baru aku kasih 5, klo mau nambahin tinggal tambahin aja kodenya seperti ini
<li><a href='url_blog_kamu'>Nama_Label</a></li>

kalau mau dibuat menu turun kode </li> nya dihilangkan lalu dibwahnya diberi kode <ul> lalu ditutup dengan kdoe </ul></li>

semoga paham, memang paling ga harus mengerti sedikit tentang javascipt,

Fyaz Collection said...

thanks banget...

rumah dijual kelapa gading said...

Terima kasih langsung meluncurrrr praktekin

Mading Mis said...

makasih gan

Uem Cuters said...

Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

Aji Wibowo said...

gan, cara bikin page buat link.a gimana???
soalnya q baru,hehe

belajar komputer said...

pusing bro

Nisya Shobariah said...

lg nyoba nih...kyanya takut g berhasil

Dimulai Dengan Belajar, Diiringi Dengan Praktik.!! said...

wah bagus juga nech tutorialnya, ane coba dech.. btw kalo bikin tab di samping kiri/kanan gimana yach tapi yang agak kecilan, biasanya isinya sederetan artikel dengan kategori-kategori tertentu. ane pernah liat tab ini di blognya http://world-of-programmer.blogspot.com .

thank yach buat sharing ilmunya..
Salam sukses yach

Dias Pujianto said...

maksih yha atas infonya...
alhamdulilah membantu saya sebagai blogger pemula

Dee Moiselle said...

nggak bisaaaaa :( bingung sayaaaa :( gagal terusss

Zameda Igga said...

yang tanya tentang merubah link nya itu maksudnya link url blog mu atau url dari postingan di blogmu, tinggal liat address bar di webbrowsermu aja..

Dee moiselle : yaa emg butuh ketelitian membuatnya.. end tag nya pun juga harus diperhatikan.. jika masih bingung lebih baik cari template yg sudah langsung mendukung menu dropdown jd kita tinggal edit2 dikit aja di html templatenya :)

Muhammad Fadhlan Ahfazh said...

< div id='header-wrapper'>
is not found,gmn itu gan?

muhammad.bonjan said...

gan nanyak itu tampilannya kok ada lebihnya bagaimana cara menghilangkannya?trima kasih

Isbat said...

<"div id='header-wrapper'>" saya tidak menemukan kode tersebut

Anindya Celinawati said...

belum bisa :(

Ininsan Biasa said...

Maaf, kamu saja tidak pakai menu drop down tapi kenapa berani menulis tentang menu drop down apalagi nulis pernyataan bahwa akhirnya kamu bisa pakai menu drop down. Jadilah blogger yang jujur & jangan suka membodohi orang lain. Praktikan dulu tulisanmu sendiri sebelum memberi tahu kepada orang lain supaya jadi blogger berkualitas. Boleh copy paste tapi pahamilah & praktikkan dulu apa yang kamu copy paste itu supaya pas orang nanya kamu bisa jawab.

Zameda Igga said...

@Ininsan Biasa: hmmm makasih ya komentar dan masukannya. begini, sebelumnya saya sudah pernah coba kok pakai menu drop down ini dan berhasil di blog zamedaku. Itu buktinya ada di screenshot kan.. itu tampilan blog saya yg lama, dan sekarang saya sudah ganti dan tidak memakai menu drop down tersebut agar terlihat lebih simpel.. sekali lagi sudah saya praktikan ya gan.. buat pertanyaan yg belum kejawab mohon maaf, karena jg tidak bisaa menjawab pertanyaan satu persatu krn keterbatasan waktu, coba liat dulu komentar2 yg sudah pernah saya jawab sebelumnya diatas.. Dan maksud saya memposting artikel diatas hanya sekedar berbagi pengalaman apa ygpernah saya peroleh agar orang lain jg bisa ikut mencobanya entah itu berhasil atau tidak yg penting sudah mencoba dan mau belajar.. gitu aja thanks :)

el vina said...

thanks...saya coba dulu yach...semoga berhasil...

rendy kazemha said...

mantab gan tipsnya

afrizal tsani said...

gan cara untuk mengarah ke label yang kita inginkan gimana ?
http://grosir-alatkebersihan.blogspot.com/

Ahmad Iyadzalloh said...

itu kan backgroundnya abu-abu motif gan, kalo mo ngganti n dipendekin pixelnya gimana nih?

SOBATMAN BAGANSIAPIAPI said...

keren-keren, di tunggu kunjungan baliknya ya gan.

SOBATMAN BAGANSIAPIAPI said...

makasi infonya..."
sangat bermanfaat bagi blog saya,,,"
saya tunggu kunjungan baliknya ya..."

Betara indra gunawan said...

wahh boleh juga ni artikel,, mksi ya bos??
infonya,,

Aguz Mahardika said...

terimakasih sobat, sangat bermanfaat untuk blog baru saya. kunjungan perdana sobat, semoga diterima dengan baik :). kunbalnya dipersilahkan

mahardikaaguz.blogspot.com

Zahra Annisa Fitri said...

Jujur saja, saya berhasil membuatnya. Tapi malah muncul list laman baru di blog saya, ya? Jadi maksud saya, di blog saya sudah terdapat list laman secara horizontal di bawah header. Setelah saya menambah script di atas, muncul list horizontal baru di atas header. Uwaah, saya bingung >.< Tapi kalau menu dropdownnya berhasil dibuat..

Blog saya >> miyoko-san(dot)blogspot(dot)com

Tapi saya sudah menghapus scriptnya karena saya juga nggak nyaman dengan dua list laman seperti itu '-'

power bank murah said...

ini yag ane cari dari kemarin akhirnya ketemu :D

Obat Tradisional said...

Terimakasih banyak sob sangat membantu sekali tutorialnya...

http://obattraditional.com/obat-tradisional-ambeien/

Bellastia Production said...

kang cara masukin productnya gmn

Zameda Igga said...

Bellastia: maksudnya masukin product yang bagaimana?

Riska Yanti said...

ngc berhasil kok,,,,,

tipu ne

http://mionglong.blogspot.co.id/

Post a Comment - Kembali ke Konten

Silakan tinggalkan komentar Anda mengenai artikel ini. Terimakasih

Related Posts Plugin for WordPress, Blogger...
 

HiStats Info