Cara Membuat Menu bar Multi Level Drop Down

Posting kali ini akan membahas tentang bagaimana Membuat Multi Level Drop Down di blog anda. waktu itu aku pernah ingin mempunyai menu bar yang berbobot. Yupz, menu bar yang bersusun.

Ehhh, pucuk di cinta ulam pun tiba, tiba-tiba seorang teman (Syagha Icikage) memberikan aku sebuah url....langsung aj ku buka ....kira2 beginilah caranya....

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

Sumber:http://trieck69.blogspot.com/2010/06/cara-membuat-menubar-multi-level-drop.html