Minggu, 14 Februari 2010

Cara Membuat Menu bar Multi Level Drop Down

Posting kali ini Trieck69 aka membahas tentang Bagaimana Membuat Multi Level Drop Down di blog anda.Karena pernah ada yang nanya tentang membuat menu bar yang berbobot maka kali ini aku akan menjawab pertanyaan itu aku sendiri bingung mau jawab apa soalnya aku juga kurang mengerti apa sebenarnya dari maksud pertanyaan itu. jadi kupikir mungkin yang dimaksud adalah Menu bar multi level drop down kali yaaaa...????
Baiklah buat temen temen yang suka ngotak atik bolg yang masih belum mengerti tentang cara Menu bar multi level drop juga boleh untuk mengikuti tutorial ini


Caranya sangat lah mudah, ikuti  saja langkah berikut:
  1. Login dulu ke bloger.com
  2. Ke menu rancangan  >---->>Lalu pilih edit html
  3. Sebelum mengedit template Anda, Anda sebaiknya menyimpan sebuah salinan dari template tersebut
  4. Lalu cari kode </head> di kotak html,jika susah mencari anda bisa menekan Ctrl+f untuk mengeluarkan menu pencarian huruf  pada halaman Mozilla Firefox.
  5. Letakkan kode berikut persis diatas kode </head>:






    <link rel="stylesheet" type="text/css" href="http://dsai.588.googlepages.com/slidemenu_hori.css" />

    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="http://dsai.588.googlepages.com/slidemenu_horiz.js"></script>
  6. Simpan template yang sudah dipaste kan sesuai dengan yang diatas
  7. Setelah di save sekarang menuju menu Tata letak dan pilih menu Elemen halaman Lalu tambah gadget halaman dengan 






    HTML/JavaScript
    HTML/JAVASCRIPT

    Tambahkan fungsional pihak ketiga atau kode lainnya ke blog Anda.
    Oleh 
    Blogger 
  8. copy kode berikut dan pastekan ke dalam gadget HTML/JAVASCRIPT Anda:






    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://trieck69.blogspot.com">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
    <ul>
    <li><a href="#">Sub Item 3.1.1.1</a></li>
    <li><a href="#">Sub Item 3.1.1.2</a></li>
    <li><a href="#">Sub Item 3.1.1.3</a></li>
    <li><a href="#">Sub Item 3.1.1.4</a></li>
    <li><a href="#">Sub Item 3.1.1.5</a></li>
    </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="http://trieck69.blogspot.com">Item</a></li>
    </ul>
    <br style="clear: left" />
    </div>

  9. simpan gadget trus letakan gadgate persis dibawah header save template dan lihatlah
  10. Anda juga bisa menambah dan mengganti nama menu sesuka hati, Saya ambilkan contoh dimenu yang pertama






    Menu yang belum dirubah

    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="
    http://trieck69.blogspot.com">Item 1</a></li>

    perhatikan kode yang diberi warna hijau,karena warna hijau lah yang akan kita rubah
    menjadi

    Menu yang sudah dirubah


    <div id="myslidemenu" class="jqueryslidemenu">





    <ul>
    <li><a href="
    http://URL BLOG ANDA.blogspot.com">HOME</a></li>

    PERUBAHAN
       URL MASUKAN SESUAI DENGAN ALAMAT YANG MAU DITUJU
      TEXT ITEM 1 SAYA GANTI MENJADI HOME

  11. Terimakasih, Dan kini Anda telah memiliki Menu bar Multi Level Drop Down di Blog Anda.....
Pembelajaran selesai semoga blog yang anda buat jadi tambah cantik........

31 komentar:

  1. Kalo ingin merubah warna nya gmana cara nya ??

    trimakasih ..mohon bantuan nya .

    BalasHapus
  2. Mantaph, Trima kasih atas artikelx.. bisa membantu saya yang pemula nih

    BalasHapus
  3. makasih bgt mas,,aq newbie..kalok mau link k halaman lain tapi tampilan mash sama gmn

    BalasHapus
  4. wah pingin coba bikin blok aja dah, udah mls main game terus. tapi apa ya topik yg mau aku angkat?
    ah... yg penting jadi blong dah yg penting bisa bermanfaat bagi orang.
    trimakasih ya mas atas infonya..

    BalasHapus
  5. tengkyu maz,lgsg ke TKP....>>>

    BalasHapus
  6. di blog saya jadi berat bgt kenapa yah gan?

    BalasHapus
  7. knp gk bisa ya ? scripnya ada yg salah gk ?

    BalasHapus
  8. @anaknegerisendir
    mungkin blog yang anda buat terlalu banyak fariasi tampilan yang mengandung link/alamat url.jadi loadnya menjadi lebih lama,karema untuk load link memang sangat berat jadi kalo bisa hilanhkan saja fariasai" tampilan yang tidak perlu

    BalasHapus
  9. thanks mas.. aq mo coba dulu ne........

    BalasHapus
  10. mas, kenapa menu barnya gag mau turun ya?? jadi cuma sebaris gitu??

    BalasHapus
  11. @ibrahim~munkin masih ada yang belum benar,dan belum sesuai dengan yang saya postingkan

    BalasHapus
  12. @Last Memoar~semoga langsung berhasil

    BalasHapus
  13. terus cara masukin menu multi level down dropnya gmana ? itu tadi kan cuma menu bar atasnya doank.

    BalasHapus
  14. mantap sob tapi napa sub menunya ngak keluar ya... gimana dong kita nich masih awab banget alnya ru belajar buat blog dan pengetahuan kita tentang html boleh dikatan masil nol....terimakasih sebelumnya untuk balasannya

    BalasHapus
  15. kok sub foldernya ketutup layout utama ya gan??jadi gk kelihatan ...

    BalasHapus
  16. lam kenal saya lagi belajar nih kok scrif di atas tidak suport yah ( tidak sesuai dengan tampilan Jquery) malah berbaris ke bawah jadinya tolong minta sarannya

    BalasHapus
  17. kenapa yang aku gak kayak gitu ya tampilannya, malah jadi kayak daftar (?)

    BalasHapus
  18. kok tidak bisa ya ? coba lihat di blog saya : http://www.today-information.blogspot.com

    BalasHapus
  19. Gan, Backlinknya sudah saya pasang... pasang balik yaa... www.today-information.blogspot.com

    BalasHapus
  20. GATOT..(GAGAL TOTAL) GAN,pas masukin URLnya malah kaga' mo turun,ane pemula gan ksi saran biar blog ane bs dknal...followback ya

    BalasHapus
  21. susah gan, ud ane coba tp gagal maning gagal maning

    BalasHapus
  22. saya udah copy paste,tapi tp sub itemnya koq ga turun (ga aktif),gan.jadi tampilannya hanya sperti tabel horizontal aja.
    bisa dibantu,gan.nuhun

    BalasHapus
  23. Kok sub menunya g bisa ya ?
    Padahal udh sesuai perintah. Pliss Help

    BalasHapus
    Balasan
    1. Tdk semua templates cocok dg kode sebagaimana di blog atas,jd msti pilih templates yg cocok,

      Hapus
  24. Thanks gan , sya sdh cba d blog sya dan berhasil...

    BalasHapus
  25. trus kalo mau masukin gambar di foldernya gmna ?

    BalasHapus