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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3W0Gd-IgpS03dxmnHKAZTb21oggsSZg_P5b0uZx23QmbZIHYY9tT80VV8uObAWrt1RwL2u6agOLbvO99OFOQpaBFV24d8x70i1JH8p2tGxXzWUYlY8UTDuIeXlhJF9CO-7eiGVI7pA6k/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

Comments

  1. < div id='header-wrapper'>

    ndak ada kode gituan

    ReplyDelete
  2. @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 ^_^

    ReplyDelete
  3. Sangat berguna nih informasinya salam kenal gan....

    ReplyDelete
  4. MAKASIH BANYAK YA GAN BUAT INFONYA

    ReplyDelete
  5. siiipp dahh.. ahaaa ..selamat..

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

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

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

    ReplyDelete
  9. makasiihhh,.

    sudah berhasil ^^

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

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

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

    ReplyDelete
  13. 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..

    ReplyDelete
  14. 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/

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

    ReplyDelete
  16. 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..

    ReplyDelete
  17. 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..???

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

    ReplyDelete
  19. 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"

    ReplyDelete
  20. ga bs ihikihikihik.......

    ReplyDelete
  21. cuma bisa 5 menu aja hadeehhhh....

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

    ReplyDelete
  23. 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,

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

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

    ReplyDelete
  26. lg nyoba nih...kyanya takut g berhasil

    ReplyDelete
  27. 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

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

    ReplyDelete
  29. nggak bisaaaaa :( bingung sayaaaa :( gagal terusss

    ReplyDelete
  30. 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 :)

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

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

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

    ReplyDelete
  34. 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.

    ReplyDelete
  35. @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 :)

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

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

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

    ReplyDelete
  39. keren-keren, di tunggu kunjungan baliknya ya gan.

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

    ReplyDelete
  41. wahh boleh juga ni artikel,, mksi ya bos??
    infonya,,

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

    mahardikaaguz.blogspot.com

    ReplyDelete
  43. 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 '-'

    ReplyDelete
  44. ini yag ane cari dari kemarin akhirnya ketemu :D

    ReplyDelete
  45. Terimakasih banyak sob sangat membantu sekali tutorialnya...

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

    ReplyDelete
  46. kang cara masukin productnya gmn

    ReplyDelete
  47. Bellastia: maksudnya masukin product yang bagaimana?

    ReplyDelete
  48. ngc berhasil kok,,,,,

    tipu ne

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

    ReplyDelete

Post a Comment

Silakan tinggalkan komentar Anda mengenai artikel ini. Terimakasih