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