Cara Membuat Menu Dropdown di Blog

Menu dropdown, berarti menu yang menurun. Menu yang lebih simple, dan tidak banyak memakan tempat. Sebelumnya saya sudah menjelaskan cara membuat menu di blog, dengan memanfaatkan laman untuk membuat menu blog. Caranya sedikit lebih sederhana, dari pada menu dropdown yang akan saya jelaskan kali ini. Untuk lebih jelasnya, lihat dulu gambar menu dropdown dibawah ini.
cara membuat menu dropdown di blog
Menu dropdown ini ada yang satu cabang, dan juga ada yang 2 cabang. Saya akan coba menjelaskan sesederhana mungkin, cara membuat dan mengatur menu dropdown sesuai dengan keinginan, agar mudah untuk dimengerti. Menu dropdown ini tidak mengedit kode html di template, tapi menggunakan widget/gadget di blog, jadi template aman ketika ada kesalahan dalam pembuatannya.Cara membuat menu dropdown di blog.
Ikuti langkah-langkah dibawah ini:

Membuat Menu Dropdown

  1. Pertama, lihat susunan kode dibawah ini. Inilah struktur keseleuruhan kode yang akan kita pakai dalam membuat menu drop down.
  2. <style>
    KODE CSS
    </style>
    KODE HTML
  3. Dari susunan kode diatas, <style> ditempatkan diawal, selanjutnya Kode Css, dan ditutup dengan </style>, terakhir Kode HTML.
  4. Sekarang yang kita butuhkan adalah, Kode Css dan HTML nya. Tidak harus buat sendiri. Cukup kunjungi situs dibawah ini.
  5. http://cssmenumaker.com/. Selanjutnya, pilih salah satu menu dropdown yang kamu inginkan.
  6. Setelah memilih, maka akan terbuka halaman baru. Pilih Costumize.
  7. Dan atur nama dan isi dari menu dropdown, gunakan add item untuk menambah menu dan gunakan edit item untuk memasukan url isi dari menu tersebut. Seperti gambar dibawah ini.
  8. cara membuat menu dropdown di blog
  9. Setelah selesai mengatur isi menu dropdown, ambil/copy kode CSS dan HTML nya. Dan pastekan di Notepad susun seperti langkah pertama.

 Memasang Menu di Widget atau Gadget

  1. Setelah selesai menyusun semua kode di Notepad. Sekarang ke bagian Tata Letak di blog. Dan Klik Tambahkan Gadget, dan pilih HTML/JavaScript.
  2. Copy semua kode di Notepad tadi dan Pastekan semua kode ke Gadget HTML/JavaScript. Dan Simpan.
  3. Selanjutnya pindahkan Gadget HTML/JavaScript ke bawah Header. Dan Silakan lihat blog.
  4. Menu Dropdown sudah jadi. Jika menu dropdown nya tidak turun. Itu berarti kita harus mengedit bagian header blog.
  5. Silakan ke Bagian Template, klik edit HTML, dan cari kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> kode lengkapnya kira-kira seperti dibawah ini.
  6. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>
    <b:includable id='main'>
  7. Ganti maxwidget='1' menjadi maxwidget='3' dan showaddelement='no' menjadi showaddlement='yes'. Dan Save Template.
  8. Kembali lagi ke pengaturan Tata Letak, pindah-pindahkan Gadget HTML/JavaScript tadi, dibawah header. Dan save.
  9. Setelah itu lihat blog, jika menu masih belum turun, ulangi lagi ke pengaturan Tata Letak, pindahkan lagi kode html ke bawah Header dan Save. Sampai Menu Drop Down berjalan dengan benar.
  10. Selesai, menu dropdown sudah jadi. Untuk cara mengubah warna dari menu dropdown, silakan kunjungi situs ini, http://www.cssportal.com/css3-menu-generator/ , disitu kita bisa belajar, cara mengubah bentuk dan warna menu dropdown, juga kode css dan html dari menu dropdown yang kita gunakan.

Cara lain dengan memasukan kode css dan html di template blog

  1. Cara diatas adalah memasukan kode di widget blog, lebih aman. Tapi jika kamu ingin mencoba cara lain, dengan memasukannya ke template blog. Masukan kode css dan html dengan format seperti dibawah ini. Cara ini tidak menggunakan <style> </style> seperti memasang menu di widget.
  2. Kode CSS
    ]]></b:skin>
    <div class='tabs-outer'>
    Kode HTML
  3. Seperti format diatas, pertama kamu cari kode ]]></b:skin> dan tempatkan kode CSS diatasnya. Selanjutnya Cari kode <div class='tabs-outer'> dan tempatkan kode HTML di bawahnya. Lalu save template.
  4. Menu Dropdown akan muncul dibawah header. Jika ingin ditempatkan diatas header, pindahkan kode html tadi ke <div class='header-outer'>. Selesai. Semoga Bermanfaat.

23 komentar:

  1. ga sukses gan....
    gw cari :
    <b:section class='header' id='header' maxwidgets='1'

    ga nemu....

    salah di mana ya?

    tolong lihat deh

    http://jurnal-pers.blogspot.com/

    BalasHapus
    Balasan
    1. ya,,saya juga udah coba pasang menu dropdown ditemplate tampilan dinamis kyk punya lu gan.
      hasilnya menu dropdown g'muncul sama sekali.
      aq coba cari
      sudah diedit2,,masih juga g'muncul..
      coba pake template sederhana saja gan, atau jendela gambar, pt.keren sekali atau yg lainnya, karena lebih mudah untuk diedit.

      Hapus
  2. biar tab menu tu gak ada batasnya gimana gan???
    ke samping kiri dan kanannya....

    BalasHapus
    Balasan
    1. sebenarnya, saya jg lgi cari tau gan cara agar menu tab g'ad batasnya.
      yg saya tau jika ingin menu tabnya tanpa batas, lebar templatenya harus ditambah

      tpi jika lebar template ditambah, maka lebar posting dan juga bagian blog laiinya akan ikut melebar. sehingga tulisan blog juga akan dimulai dari paling kiri blog.

      klo tab menu yg saya gunakan ini, asli bawaan dari template blogger pt.keren sekali.

      nanti jika saya sudah tau cara buat menu tab tanpa batas, saya akan beritahu caranya.

      Hapus
    2. Lakaran, silakan dibaca disini http://fandrajuani.blogspot.com/2013/10/cara-buat-header-dan-tabs-tanpa-jarak.html

      Hapus
  3. sukses bro.....
    tpi menu drop downya tidak muncul di depan tapi di belakang bro jadi tidak kelihatan dan kalaw aku coba pindahkan malahan eror tata letaknya tidak bisa di save....
    gimana niii........
    kalau mau liat ini nama blognya http://kamu-dy.blogspot.com blog ini baru saya buat jadi belum ada posting apa-apa...

    mungkin bro ada jawabannnya..

    tanks bro... itu saja

    BalasHapus
    Balasan
    1. itu menu nya dimasukan ke gadget atau langsung ke template??
      klo ke gadget, bisa langsung dipindah2. klo eror, coba direload dlu tata letaknya, lalu dipindahkan lagi..klo blom bisa juga add fb w aj, nanti w bantu

      Hapus
  4. ane bermasalh di :hover om ..
    jadi klo menu dropdown disorot ntu kaga diem tapi ilang, jadi kaga bisa di klik sub link nya ..
    mohon pencerahannya om ..
    trimakasih ..
    salam kenal

    BalasHapus
    Balasan
    1. dari yg q liat, dropdownnya udh jalan tu diblog lu gan. Cuma belum dikasih URL aj dibagian kode HTMLnya. alamat url dari address bar yg ada diatas browser, misalnya: tuyule.blogspot.com. atau faceb.com..

      klo sudah dikasih url, waktu diklik, maka akan terbuka halaman dari URL itu

      Hapus
  5. dropdown nya ga muncul-muncul :(

    BalasHapus
    Balasan
    1. coba diedit dulu bagian header nya happy, Ganti maxwidget='1' menjadi maxwidget='3' dan showaddelement='no' menjadi showaddlement='yes'. Save Template.
      trus ke pengaturan Tata Letak, pindahkan Gadget HTML/JavaScript tadi, dibawah header. Dan save.

      Hapus
  6. jadi double menunya dengan menu bawaanya gan, kl menu bawaanya tidak ditampilkan ada masalah untuk home/index nya.......
    ada solusi gan?

    BalasHapus
    Balasan
    1. coba ganti index.html dibagian home dengan url awal blog agan, contoh:korong.blopot.com

      Hapus
  7. gan, menu ane kok dropdown nya masih tetep dibelakang body post ya.. pdhal udah ane ganti dua kali.. solusinya gimana nich.. ane pake widget HTML/Javascript. ini alamat ane : http://blog-arzetha.blogspot.com/ thanks bantuannya...

    BalasHapus
    Balasan
    1. id='header' maxwidgets='1' showaddelement='no' ganti kode 1 menjadi 3 dan no menjadi yes. save template. trus pindahkan widget tepat dibawah gadget header(judul blog), pastikan dibawah header, bukan dibagian tab. kasih tau saya lagi,, sudah bisa atau blom..

      Hapus
  8. gan coba liat blog ane. kok drop downnya membelakangi body post. solusinya gimana gan ?
    http://tigu-toman.blogspot.com/

    BalasHapus
    Balasan
    1. caranya ada tu gan di Memasang Menu di Widget atau Gadget, nanti jika blom bisa, kasih tau lgi

      Hapus
  9. Gan, mohon bantuannya :)
    Kok ngga muncul ya dropdown nya, maksudnya ga muncul saat saya arahin mouse ke judul menu tp ga ada yg muncul otomatis ke bawah, terimakasih.

    BalasHapus
    Balasan
    1. itu menu dropdown mau diletakan dimana gan??dibawah judul blog atau di sidebar.
      klo di sidebar. coba pilih menu vertical dari situs cssmenumaker baru dipasang di sidebar(kiri/kanan) blog

      klo untuk diletakan dibawah judul header blog, pilih yg menu dropdown/menu horizontal dropdown dari situs tersebut. setelah dipasang di bawah header blog, ikuti langkah2 Memasang Menu di Widget atau Gadget diatas. agar dropdownnya turun..

      Hapus
  10. di bawah header gan, udah kok udah saya ikutin semua langkah2nya, karna gagal jadi saya pindahin ke samping dulu untuk sementara.

    BalasHapus
    Balasan
    1. pindah-pindahkan Gadget HTML/JavaScript nya gan dibawah header, sampe dropdownnya keluar, klo masih g'keluar itu tandanya gadget html/javasript masih ditempatkan di bagian tab.

      Hapus
  11. Mas saya udah buat Menu Dropdownnya .....terus cara memasukkan artikel saya ke Menu Dropdownnya gimana?

    BalasHapus
    Balasan
    1. masukan URL dari artikel ke menu dropdown agan, contoh seperti url halaman artikel ini, http://pengguna-komputer.blogspot.com/2013/04/cara-membuat-menu-dropdown-di-blog.html
      itu menu dropdwon kan ada kode html dan css, url artikel dimasukan ke kode html nya, contoh kode html di menu, baca disini gan http://fandrajuani.blogspot.com/2013/11/cara-membuat-menu-html-dan-css.html

      Hapus

Semoga Artikel diatas dapat membantu anda menemukan, apa yang sedang anda cari. Silahkan tinggalkan komentar.