Membuat Menu bar Multi Level Drop Down


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

CONVERSATION

0 komentar:

Post a Comment

Silahkan berkomentar sesuai kesan anda, tetapi jangan tinggalkan norma-norma kesopanan. Syukron