Minggu, 06 Januari 2013

Cara Membuat Menu Horizontal Blog Drop Down

Cara Membuat Menu Horizontal Blog Drop Down adalah cara berbeda dalam menampilkan menu-menu yang ada didalam blog yang akan menghemat ruang serta mengelompokkan setiap kategori dari sub menu halaman yang memiliki keterkaitan dengan menu utama dalam blog tersebut. Membuat menu horizontal drop down tidak sama dengan menu horizontal sebelumnya yang telah saya ulas sebelumnya. Pada menu horizontal ini akan memiliki sub menu yang komplek dan tidak autonom seperti menu horizontal sebelumnya karena ia memiliki sub menu yang berkaitan dengan menu utama seperti yang terlihat pada gambar berikut ini

Cara Membuat Menu Horizontal Blog Drop Down


Berikut Cara Membuat Menu Horizontal Blog Drop Down
  1. Masuk ke akun blogger anda
  2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
  3. Cari kode ]]></b:skin>
  4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>
    #navdropdownsearchengine { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; }
    #navdropdownseleft { width: 400px; float: left; margin: 0; padding: 0; }
    #navdropdownse { margin: 0; padding: 0; }
    #navdropdownse ul { float: left; list-style: none; margin: 0; padding: 0; }
    #navdropdownse li { list-style: none; margin: 0; padding: 0; }
    #navdropdownse li a, #navdropdownse li a:link, #navdropdownse li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; }
    #navdropdownse li a:hover, #navdropdownse li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; }
    #navdropdownse li li a, #navdropdownse li li a:link, #navdropdownse li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; }
    #navdropdownse li li a:hover, #navdropdownse li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; }
    #navdropdownse li { float: left; padding: 0; }
    #navdropdownse li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
    #navdropdownse li ul a { width: 140px; }
    #navdropdownse li ul ul { margin: -32px 0 0 171px; }
    #navdropdownse li:hover ul ul, #navdropdownse li:hover ul ul ul, #navdropdownse li.sfhover ul ul, #navdropdownse li.sfhover ul ul ul { left: -999em; }
    #navdropdownse li:hover ul, #navdropdownse li li:hover ul, #navdropdownse li li li:hover ul, #navdropdownse li.sfhover ul, #navdropdownse li li.sfhover ul, #navdropdownse li li li.sfhover ul { left: auto; }
    #navdropdownse li:hover, #navdropdownse li.sfhover { position: static; }
  5. Cari kode dengan struktur seperti berikut ini
    <div id='header-outer'>
    <div id='header-inter'>
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
    <b:includable id='title'>
    ----------------------
    ----------------------
    ----------------------
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    </div>
    </div>


    Letakkan kode berikut tepat dibawah kode </b:section> diatas

    <div class='menuhorisontal'>
    <ul id='navdropdownse'>
    <li><a href='#'>Menu DropDown</a></li>
    <li><a href='#'>Menu DropDown A</a>
    <ul>
    <li><a href='#'>Menu DropDown Sub A1</a></li>
    <li><a href='#'>Menu DropDown Sub A2</a></li>
    <li><a href='#'>Menu DropDown Sub A3</a></li></ul></li>

    <li><a href='#'>Menu DropDown B</a> </li>
    <li><a href='#'>Menu DropDown C</a> </li>

    <li><a href='#'>Menu DropDown D</a>
    <ul>
    <li><a href='#'>Menu DropDown Sub D1</a></li>
    <li><a href='#'>Menu DropDown Sub D2</a></li>
    <li><a href='#'>Menu DropDown Sub D3</a></li></ul></li>
    <li><a href='#'>Menu DropDown E</a> </li>
    </ul>
    </div>
  6. Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog drop down
  7. Simpan Template
Semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Drop Down

Cara Membuat Menu Horizontal Blog Drop Down Rating: 4.5 Diposkan Oleh: ana sriwahyuni

97 komentar:

  1. Mantep nih gan, follow ya redynirtiana.blogspot.com

    BalasHapus
  2. @Redy Nirtiana Muzaffar makasih atas kunjungan dan komentarnya gan,, tentu..

    BalasHapus
  3. saya agak bingung,,,maklum pemula
    gan bisa ga buating tutorial berupa videonnya?

    BalasHapus
  4. bisa kirim videonya ke email saya ga?
    www.gungjunior@gmail.com

    BalasHapus
  5. @agung yoga mohon maaf mas, untuk videonya saya tidak bisa buatin, artikel diatas saya kira bisa diterapkan dengan mudah kok,,,

    BalasHapus
  6. terima kasih banyak atas tutornya gan, salut deh ibu-ibu indonesia juga jago ngeblog...

    BalasHapus
  7. ijin mempraktekkan bu ana,terima kasih banyak...

    BalasHapus
  8. @sinopsis dan review film terimakasih kembali, silahkan dan semoga bermanfaat

    BalasHapus
  9. @objek wisata di indonesia dan sinopsis film sama-sama mas, makasih banyak juga atas komen dan kunjungannya
    mungkin ini yg dinamakan emansipasi hehee

    BalasHapus
  10. Saya salut ma admin blognya..he.. Di sela2 ngurusin keluarga tp mc juga .. Sempat ngeblog ..salam knal and happy blogging

    BalasHapus
  11. Terimakasih ...
    sangat membantu saya
    seora g newbe
    ..................

    BalasHapus
  12. @wawan nawansta saya juga masih newbie mas, masih belajar juga,, makasih atas kunjungan serta komentarnya..

    BalasHapus
  13. Artikelnya bermanfaat utk saya yang gaptek.Boleh nanya ya mbak, cara mengisi menu navigasi dengan halaman statis ada artikelnya nggak?

    salam sukses
    MFY

    BalasHapus
  14. @maria yuniarti di blognya mbak Maria kan sudah ada dan terisi tuch,,,

    BalasHapus
  15. Mas maksud cara yg ke 3 masukin kode mksdnya apa yh?

    BalasHapus
  16. @Mardi Mardiansyah Wiria mungkin maksud mas Mardi poin yang ke 4? kalo yg ke 3 kan Cari Kode...

    BalasHapus
  17. saya pemula tapi agak bingung...
    trims panduan nya...

    BalasHapus
  18. @Chia Network kalau boleh tahu, bingungnya dimana? mari kita belajar bersama-sama..

    BalasHapus
  19. bunda... sy newbie.. masih bingung untuk paste kodenya dimana, masalahnya.. untuk struktur spt dibawah ini.. ada 4 (empat) dan saya coba jd tidak muncul menu'a.

    -----------


    BalasHapus
  20. bunda... sy newbie.. masih bingung untuk paste kodenya dimana, masalahnya.. untuk struktur spt dibawah ini.. ada 4 (empat) dan saya coba jd tidak muncul menu'a

    '"
    '"
    '"


    note : sengaja sy kasih tanda '" agar bisa ke post.

    BalasHapus
  21. @farus Rodman maksudnya gimana mas Rodman? tanda "' maksudnya yang mana?

    BalasHapus
  22. saya masih bingung sama cara yg ke 5. maklum newbie

    BalasHapus
  23. @M. Ahwan Rozali jangan lupa centang Expand wdiget templatenya dan cari salah satu kode diatas, coba fokus kan pada header-wrapper

    BalasHapus
  24. Yth. Mbak Yuni..
    Setelah coba saya praktekan Cara membuat menu horizonal dropdown tsb. Ada kesulitan yang saya alami, yaitu kode script berikut ini tidak saya temukan pada struktur html template nya. Mohon penjelasan Terimakasih.
    Abby Syamsi

    BalasHapus
  25. Yth. Mbak Yuni..
    Setelah coba saya praktekan Cara membuat menu horizonal dropdown tsb. Ada kesulitan yang saya alami, yaitu kode script No. 5 tidak saya temukan pada struktur html template nya.

    Mohon penjelasannya. Terimakasih.
    Abby Syamsi

    BalasHapus
  26. @Anonim setiap template memiliki kode yang berbeda mas, sebagai acuannya silahkan cari kode Header1, semua template pasti memiliki Header1 dan cari bagian atas atau sebelum kode Header1 dan penutupnya,, kalau bisa tolong sertakan alamat blognya, biar saya cek,,

    BalasHapus
  27. Admin... Minta Tolong donk...
    bagaimana sih caranya merubah Besar Menu Horizontal dan margin,,warna,,,backround dan lainnya....
    thanks sebelumnya...

    BalasHapus
  28. visit my blo aoret13.blogspot.com

    BalasHapus
  29. ko di blog saya gk ada div id header nya ya? udah cari muter''?
    ada bnya div class header outher..

    BalasHapus
  30. Mantep gan infonya :)

    Kunjungi balik http://septiankenthis.blogspot.com/
    Salam ngeBLOG Kenthis 69 !

    BalasHapus
  31. @halimah queen saya sudah lihat kode template blognya mbak Halimah, semua kode yang ada di artikel diatas, ada semuanya, silahkan dicari lagi dan untuk mencarinya jangan lupa centang Expand Template Widget agar kodenya muncul semua..

    BalasHapus
  32. sudah saya pasang di blog saya http://pinque27.blogspot.com, tapi link-nya koq nggak bisa di klik ya....? Trim's panduannya..

    BalasHapus
  33. thanks info'x gan, sangat bermanfaat sekali bagi saya ..

    BalasHapus
  34. hai thanks infox
    sy udah buat page statis sebelumnya lgsung dari blogger.
    dan sudh terisi bbbrpa postingan. Nah apa bisa buat dropdown dari page statis yang sdh ada ? krn kl masuk ke html gitu pasti doble jadinya kl page statis yg pertama ga dihapus.

    trus kl udah buat menu dropdown pke html gitu. gimana cara menempatkan postingan kl mau tulis postingan baru ?
    mohon bantuannya

    thanks

    BalasHapus
  35. @Masturi Mahuding kalau menggunakan kode langsung yang sudah di statis page untuk menu horizontal, saya kira cukup sulit, nukan tidak bisa tp perlu penambahan kode-kode dari dropdown terebut

    BalasHapus
  36. sangat membantu saya..
    jangan lupa kunjungi blog saya
    http://www.cyber-corp99.blogspot.com

    BalasHapus
  37. Mksh info'x gan sangat membantu sekali..

    BalasHapus
  38. makasih sis..oiya cara ngilangin baris menu warna biru yang ada di paling atas itu gmn yaa..#newbe

    BalasHapus
  39. aku jga binggung.saya usaha terus.nanti bisa.

    BalasHapus
  40. wah mantap nih postnya ane langsung coba..
    follow juga ya globallisasi.blogspot.com

    BalasHapus
  41. terimakasih artikel ini sangat membantu saya .. !!'

    BalasHapus
  42. kok... ttep ga bisa sist. apa template yang kita pasang juga berpengaruh yaa ?
    mohon pencerahannya...

    BalasHapus
  43. thankz,,,,,postingx.. sngt mmbantu.......

    BalasHapus
  44. terima kasih, ane pusing cari2in ini, kunjungi blog saya yg sederhana http://habiball.blogspot.com/

    BalasHapus
  45. Numpang Lewat gan, harap kunjung kembali ya

    BalasHapus
  46. Mantap mbae... tapi masih belum mudeng juga nich.... Mampir ya ke http://desain-rumah888.blogspot.com/

    BalasHapus
  47. Bagus infonya, sangat berguna!!
    Tpi klau saya pengen nambah menu dropdownnya dan didalam menu itu ada sub- subnya lgi lagi bagaimana caranya? tinggal nambah dikoding kedua atau koding 1ada yg harus ditambab juga?
    Maaf baru belajar bikin blog,,

    BalasHapus
  48. kalau memasukan tulisan kita ke menu gemana ya mbak, moho solusinya ya,
    ne blog saya :

    http://indonesiaprogresif.blogspot.com/

    BalasHapus
  49. gan ko menu dropdownnya ga lancar ya?? Ini blog ane http://st-times.blogspot.com/ Tlg ya gan knp bisa gitu...

    BalasHapus
  50. terimakasih informasinya saya akan coba pasang

    BalasHapus
  51. Saya kok gk ktemu dengan kode yang ada dilangkah 5 (yg tulisan merah, itu knpa ya ?

    BalasHapus
  52. terimakasih informasinya saya akan coba pasang

    BalasHapus
  53. kalau memasukan tulisan kita ke menu gemana ya mbak, moho solusinya ya,

    BalasHapus
  54. erimakasih artikel ini sangat membantu saya .. !!'

    BalasHapus
  55. http://maimtricks.blogspot.com
    mohon kunjungannya

    BalasHapus
  56. Okto Mubiarto23 Mei 2013 11.06

    Buk format edit HTML kan udah berubah gimana nih.............?

    BalasHapus
  57. horee berhasil...
    hehehe
    newbie nih gan...
    mohon kritiknya ya di http://pkbmnurulhuda.blogspot.com/

    mksh tutorialnya.. :D

    BalasHapus
  58. terima kasih gan sangat bermanfaat

    BBM hadir 27 juni di android dan ios

    http://syamsblog95.blogspot.com/2013/06/blackberry-messenger-hadir-di-android.html

    BalasHapus
  59. Klo untuk merubah lebar dan tinggi menu nya yang harus di ganti yg mananya ya mba mohon pencerahannya terimakasih

    BalasHapus
    Balasan
    1. pada bagian kode ul, ganti width untuk lebar menu utama
      bagian li ul, ganti width untuk lebar sub menu (menu dropdownya)
      untuk tinggi tergantung dari pengaturan, margin dan padding; tinggi dari teks terhadap kolom menu (line height);

      Hapus
  60. wah,gak gampang kaya di wordpress self host ya gan.. salam kenal

    BalasHapus
  61. Artikel yang sangat bermanfaat, ..mantap, Eitss jngn lupa daftar di sini ya AutoTraffic Exchange dan SEO Killer

    BalasHapus
  62. min aku uda nyoba tapi ko g bisa drop down...maap pemula.
    http://storeyanes.blogspot.com/
    cek min... makasi

    BalasHapus
  63. BU, BELUM DIJAWAB CARA MEMPOSTING ARTIKEL KE MENU

    BalasHapus
  64. bro kalo ga ada ]]> gmna ya?? soalnya gua ga ada ni, jadi ga bisa pake tuhh ]]>,,
    tolong bantuan nya ya gan ^_^

    BalasHapus
  65. Kalau ganti warnanya bisa gak ya?

    BalasHapus
  66. Terimakasih yanh gan infonya, saya sudah berkeliling nyari yang pas sama templat saya , ternyata disini yang cocoknya,,,izin follow yah www.pakaiantanahabangbandung.com

    BalasHapus
  67. Bagus Infonya,ijin Nyimak dulu mas

    BalasHapus
  68. saya mau tanya, kalo di template blog saya ngak ada ]]> skin bagaimana? apa harus di buat ]]> di antara baris kode template saya atau bagaimana? apa ada mslah dgn template saya padahal say ngak pake template yang download.. asli dari blogger

    mohon penjelasannya

    BalasHapus
  69. kalau tidak ada kode ]]> maka di template menggunakan kode </style>

    BalasHapus
  70. gak cocok sama template ane gan

    BalasHapus
    Balasan
    1. coba gunakan yang terbaru ini mas,panduantemplateblog.com/2014/03/update-menu-horizontal-drop-down-search.html

      Hapus
  71. mas biar ukurannya sama besar dengan menu bawaan yang ada diblog saya bagaimana ya mas? coba mas cek menu category kan kecil itu? biar sama ukurannya dengan menu sitemap yang disebelahnya bagaimana ya mas? apa yang harus saya edit? sudah saya coba tetap gak berubah ukuran nya.. cek disini mas untuk linknya http://adsteuku.blogspot.com

    BalasHapus
    Balasan
    1. kalau sudah ada kode menunya, lebih baik dipilih salah satu saja mas..
      kalau ingin menyamakannya, sesuaikan ukuran font, margin, padding, dan line-height dengan kode bawaannya

      Hapus
  72. infonya bermanfaat tnte mksih ya ^_^
    oia,,kayaknya ada yang kesusahan tante mencari code ]]> di blog tampilan baru...
    soalnya blog baru sm blog lama kan beda jadi susah kl gk tau nyari code ]]>.

    BalasHapus
    Balasan
    1. memang benar mas, hanya sebagian caranya saja yang berbeda, untuk mencari kode di template, klik terlebih dahulu area kode, selanjutnya tekan CTRL+F pada keyoarb sehingga muncul kolom pnecarian didalamnya, bukan diluar... selanjutnya, masukkan teks atau kode didalam kolom tersebut, tekan Enter.. ketemu dech.. :)

      Hapus
  73. oia 1 lgi tante ko menu dropdown sub1A-dst ko pas mau di klik ngilang,,,itu kneapa ya tante tolong pencerahanya makasih :)

    BalasHapus
    Balasan
    1. ada yang kurang kodenya mas.. :)

      Hapus
  74. Makasih infonya... terbukti......

    BalasHapus
  75. aku gak ngerti bu -_- gabisa bisa tolongin :'(

    BalasHapus
    Balasan
    1. di coba dulu mbak, di blognya mbak Dwir sudah ada tuch menu horizontal tapi belum dropdown ya..

      Hapus
  76. Top Top Top, markotop, terima kasih Sis sharenya.

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia