English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
You are here: Home » » Cara Membuat Menu Dropdown / Sub Menu

Cara Membuat Menu Dropdown / Sub Menu

By. Dedi Yahya S

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara membuat menu dropdown / sub menu di blogspot.
Demo Menu Horizontal




Cara Membuat Menu Dropdown / Sub Menu pada Blogspot 
  • Login pada Blogger
  • Masuk mode Rancangan kemudian Edit HTML
  • Beri centang pada Expand Template Widget
  • Cari kode <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>
  • Jika sudah ketemu, letakan kode berikut diatas kode tadi

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='http://blogtutorials-01.blogspot.com'><b><blink>Blogger Tutorial</blink></b></a></li>
</ul>
</div>
Catatan:
Silakan ganti tanda PAGAR (#) dengan link/url yang kamu mau, boleh link posting atau link Label (Kategori)
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.
Hal-hal yang mungkin akan ditanyakan :
1. Kode yang harus dicari tidak ada di blog saya
Solusinya, silakan pasang kode menu horizontak tersebut di tempat yang kira-kira pas dengan yang kamu mau, kemudian klik Preview (Pratinjau). Jika masih belum pas silakan pindahkan  kode tersebut kemudian Pratinjau lagi. Lakukan sampai menunya sudah berada ditempat yang kamu mau.
2. Bagaimana cara memasukkan beberapa artikel dalam 1 menu?
Agar bisa menampilakan beberapa artikel dalam 1 menu maka kamu harus pasang Link Label pada menu tersebut, caranya sama, yaitu dengan cara mengganti tanda pagar (#) dengan link label yang ada di blog teman. 
Demikian Blogger Tutorial tentang Cara Membuat Menu Dropdown / Sub Menu.


Semoga bermanfaat dan semoga berhasil
Terima Kasih ^_^

91 komentar:

  1. thanks ^.^ cara tersimple yg saya temukan :)

    BalasHapus
  2. 100% WORKED!!!
    Thx,
    http://www.roldusandy.blogspot.com

    BalasHapus
  3. Saya coba ada pesan error in line 782 colomn 3, "ul" should be added with the right """. Sy coba lacak kok tidak ketemu

    BalasHapus
  4. Terima kasih gan, ini menu yang paling simple dan gk bikin ribet..... salam kenal and kapan2 kalo agan sempat ditunggu kunjungannya di kkpi-smkpertiwi-bogor.blogspot.com

    BalasHapus
  5. Terimakasih sob cara ini yang satu-satunya berhasil dan simple yang saya terapkan

    BalasHapus
  6. Komentar ini telah dihapus oleh penulis.

    BalasHapus
  7. Cara mengganti warna nya gimana ya boss? supaya Pas dengan templatenya! maaf bnyak tanya saya pemula!

    BalasHapus
    Balasan
    1. Ganti kdoe ini "#156994" pada kode "background:#156994"
      kode ini = #156994 adalah kode warna. agan bisa ganti kdoe warnanya sesuai sma templatenya ..

      Hapus
  8. Cuman buat tambahan, nanti buat tulisan di menu barnya, jangan ada huruf "&" nya! nanti bisa error..

    terima kasih

    BalasHapus
  9. Pusing ngaduk-ngaduk mbah google, akhirnya ketemu juga tips keren ini. Makasih banget.

    BalasHapus
  10. Cara merubah background nya gmn sob..tu kan bewarna biru,,saya pengen nya warna lain...trmksih..

    BalasHapus
    Balasan
    1. cari kode ini di line ke 3 : background:#156994
      kode ini #156994 adalah kode warna, ganti kode dengan kode warna yang lain, gan bisa cari kodenya disini :
      http://blogtutorials-01.blogspot.com/2012/04/kode-warna.html

      Hapus
  11. saya sudah berhasil bikin menu dan sub menunya. trus, gimana cara masukin artikel ke masing2 menu dan sub menu? semua artikel kok masuknya ke beranda? tolong ya mas, saya baru belajar bikin blog.

    BalasHapus
    Balasan
    1. cari tulisan "Menu + Sub Menu" kemudian pilih salah satu yang ingin diganti.

      ganti tulisan "Menu + Sub Menu", ganti dengan menu yang gan ingin.
      ganti tulisan "Sub Menu 1", ganti dengan sub menu yang gan ingin lalu ganti tanda "#" disamping Sub menu yang gan ganti sama link dari artikel yang tadi di Sub menu..

      Semoga berhasil :)

      Hapus
    2. Komentar ini telah dihapus oleh penulis.

      Hapus
    3. trims ya mas.... sudah bisa :)

      Hapus
  12. Thank's sangat membantu
    kunjungi juga
    http://susisetianingsih.blogspot.com

    BalasHapus
  13. mas gimana cra ngatur ukuran nya?

    BalasHapus
  14. Thanks ya. Terimakasih. izin copy ya

    BalasHapus
  15. wah...mantap banget lah..jadi blog saya bisa banyak menu dalam menu..ibatratkan mimpi dalam mimpi...hehe..terimakasih ya...bermanfaat....

    BalasHapus
  16. mas,gimana cara ngisi artikel nya ,maklum newbie hehe

    BalasHapus
  17. trimakasih banyak gan..atas pengetahuannya...

    BalasHapus
  18. Komentar ini telah dihapus oleh penulis.

    BalasHapus
  19. trima kasih atas tutorialnya gan. semoga ilmunya makin bertambah dan bermanfaat. sukses selalu....

    BalasHapus
  20. Kunjungi blog kami techwon.blogspot.com

    BalasHapus
  21. wah keren nih makasih ya vist back gan http://grosir-alatkebersihan.blogspot.com

    BalasHapus
  22. cara ubah ukuran panjangnya gmn ya? biar sesuai sm template kita?
    tks

    BalasHapus
  23. Trims Mas tutornya, alhamdulillah sudah bisa diterapin di web saya, simple banget, kebenaran lagu cari artikel kaya gini buat penyegaran diweb saya, sudi mampir untuk liat2 di www.infopelayaran.com

    BalasHapus
  24. kurang ngerti cara masukin artikel ke dalam sub menunya ..
    bisa tolong di perjelas ??
    maksud "link label" tuh apaa ?? ehehe,
    makasih :)

    BalasHapus
  25. gan worked banget nih, ngemeng-ngemeng buka dong blog saya www.stephenlambokxiipa.blogspot.com :)

    BalasHapus
  26. tanks gan

    www.kosmetik-obat.blogspot.com

    BalasHapus
  27. Kalau Cara Ngganti Panjangnya GI MANA ????

    BalasHapus
  28. klo jadi orange warnanya apa kode nya

    BalasHapus
  29. Waaa Makasih Gan .. Sukses Nih Thanks Thanks

    BalasHapus
  30. Ane izin nyobain dulu gan. :D
    jangan lupa mampir di blog ane ya gan. :D

    best regards:
    http://pelajartekno.blogspot.com

    BalasHapus
  31. terimakasih ya gan..........
    berhasil kok........

    BalasHapus
  32. terimakasih work gan kunjungan balik ya http://realzarma.blogspot.com

    BalasHapus
  33. 100% WORKED!!!
    sukses slalu gan!

    BalasHapus
  34. Terima kasih atas Infonya gan!!!

    http://fathaxs.blogspot.com/

    BalasHapus
  35. Salam kenal gan.....
    Thx ya gan, punya ane masih under consruction....
    Kapan" mampir ke blog ane...

    BalasHapus
  36. ini yang di sebut mantap.. thanks gan.. dpt ilmu blink juga

    BalasHapus
  37. makasih atas infonya yang sangat membantu ane,,tpi klo boleh tau cara membuat hurufnya tidak miring gimana agan,,,terimakasih

    BalasHapus
  38. thanks infonya, kunjungin toko kosmetik aku yach,...
    www.modernshop.us

    BalasHapus
  39. berhasil berhasil Hore
    mampir ya ke Blog saya

    BalasHapus
  40. salam kenal,
    Thx y, tips nya bermanfaat banget buat saya
    Ditunggu kunjungan baliknya

    BalasHapus
  41. Wah kog susah ya gan soalnya mau ganti navbar

    BalasHapus
  42. klo mw Ganti warna'y gmn mas ? :D

    BalasHapus
  43. Komentar ini telah dihapus oleh penulis.

    BalasHapus
  44. keren gan...
    mampir ke http://jubilon88.blogspot.com/
    makasih gan

    BalasHapus
  45. thanks gan,
    mampir ya www.aefs.blogspot.com

    BalasHapus
  46. Nice POST.





    MamPIR.
    http://akbar-cp.blogspot.com

    BalasHapus
  47. bro, mohon bantuannya :(
    saya udah coba banyak banget cara yang saya dapet dr banyak blog
    dan gak ada satu pun yang berhasil, termasuk cara kamu..
    bisa minta tolong bantuannya gak?
    i need your help so much, soalnya orang orang di atas pada komen sukses, aku doang yang gak berhasil
    08999931764, please contact gw

    BalasHapus
  48. aaa... makasih kaka, aku jadi ngerti. udah nyoba tapi ga diterapin. keburu puyeng sama judu2 blog aku yang *campur aduk*. :)

    BalasHapus
  49. gan, bagaimana cara memasukkan artikel/postingan ke dalam menu..maaf aku baru belajar blog
    sudah kuikuti langkah2 diatas spt yg gan uraikan, sudah berhasil buat menu dan sub menunya namun utk memasukkan postingan ke menu2 nya, aku belum paham...mohon dibantu ya gan....
    makasih sebelumnya gan....

    BalasHapus
  50. Thanks gun,
    Your tutorial is Simple and easy to practice ...
    (y)

    BalasHapus
  51. Sangat bermanfaat gan.. saya sudah pake 100% OK..
    http://bisnisnet-terpercaya.blogspot.com

    BalasHapus
  52. Beri centang pada Expand Template Widget??
    bantuin donk, maksudnya gimana nich, maklum nubie

    BalasHapus
  53. work thank
    visit back logikacom.blogspot.com

    BalasHapus
  54. Terima kasih. It works.Tapi, saya ingin tahu caranya buat sub menunya sub menu (jadi menu+sub menu+sub menu). Saya pernah lihat website ada yg pake sub menunya ada sub menunya lag. Mohon bantuannya!!!
    M Blog ag-free.blogspot.com

    BalasHapus
  55. Wow! Keren nih.. Thanks Sharing-nya...

    BalasHapus
  56. maaf mas itu hanya buat template default saja apa gimana yah?? mohon infonya mas

    BalasHapus
  57. makaciiiiiihhhhhh.....
    maen ke blog ane yo....
    http://fac-evil.blogspot.com/

    BalasHapus
  58. makasih gan, ijin pasang ya :D
    kunjungi blog saya kawan
    http://mochrizkypurnama.blogspot.com

    BalasHapus
  59. waawwwww mantaaaabbb gan thanks yoooo sip lah tutor nya (y) (y)

    BalasHapus
  60. Tggal pnrapnny aja nh
    doain mga brhasil:-D
    maksh artkly sgt brmanfat buat say
    yg mash bau kencur ttang cra ngblog hehehe

    *dtnggu KUNBAL rekan2 bloggr
    k chemicals-sandi.blogspot.com
    ramaikn krtik & sarn
    anda demi kemajuan blog saya

    BalasHapus
  61. Akhirnya setelah lama nyari ketemu juga tutorialnya, dan berhasil! :D
    Makasih infonya :)
    http://eufeme-design.blogspot.com

    BalasHapus
  62. keren sob..thanks yaa..
    http://cooverbox.blogspot.com

    BalasHapus
  63. Expand Template Widget yang mana ya gan ?

    BalasHapus
  64. ih mantep bgt gan..nanti dicoba ya, ni blog baru...

    BalasHapus
  65. Thank you infonya..sangat bermanfaat! :)

    BalasHapus
  66. terimakasih banyak infonya, sangat membantu..

    BalasHapus
  67. makasih banget, ini sangat bermanfaat boss. BY: Jual Sepatu Harga Grosir

    BalasHapus
  68. Gan gak bisa nih untuk kasih masuk link LABEL di sub menu ? ada solusi dan trik yang lain.

    BalasHapus
  69. klo kita mau ngepost sesuatu disubmenu nya gmna yah? kan gk ada linknya mas..maaf dan makasih.

    BalasHapus
  70. cara ngatur lebar sederet menunya gimana ya ?
    ini kelebaran, menunya terlalu pojok kanan kiri
    coba cek herbalshop-indo.blogspot.com
    blognya belom jadi :v

    BalasHapus
  71. nice info gan. btw , buat atur width menubar nya dmn ya gan ? ane cari2 & otak atik ga ketemu2 .

    BalasHapus
  72. cara atur lebar nya biar sesuai template gmna gan??!!!!!!!!!

    BalasHapus
  73. aku sangat berterima kasih semoga dapat ku pasang !
    salam salam salam...........

    BalasHapus
  74. gan.. mau tanya..

    di blog saya sudah ada menu dan sudah ada sub menu nya.. cara buat sub menu di sub menu gmn ya??

    mungkin bisa cek blog saya

    www.marakolstore.blogspot.com

    mohon bantuan nya

    BalasHapus
  75. makasih banget gan blog ane jadi tambah keren walau masih acak acak adul

    BalasHapus
  76. saya ingin mengelompokan hasil posting sesuai kategori di menu,, bgaimana tuh cara mengelompokannya,, biar saat dibuka pertama gk kebuka semua......

    BalasHapus
  77. Join dong di http://tessar27.blogspot.com/

    BalasHapus

Berlangganan Artikel Blogger Tutorial Melalui EMail. GRATIS!!
Masukkan Alamat Email Anda di Sini

...::: http://blogtutorials-01.blogspot.com :::...