Selamat Datang Di Blog Bambang Bayu Aldi

Jumat, 07 Oktober 2011

Cara Membuat Menu bar Multi Level

Gimana si cara buat Menu bar yang ada menu didalamnya kaya yang gambar diatas yang warna item itu.

tadi siang temen kuliah gua ada yang nanya, namanya putu, aneh kaaan???  emang orangnya aneh si dia mah. :)

berikut tutorialnya. ^_^

  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>
     
  1. Simpan template yang sudah dipaste kan sesuai dengan yang diatas
  2. Setelah di save sekarang menuju menu Tata letak dan pilih menu Elemen halaman Lalu tambah gadget halaman dengan HTML/JAVA SCRIPT
  3. copy kode berikut dan pastekan ke dalam gadget HTML/JAVASCRIPT Anda: 
  4.  
  5. <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://b-bbengwonka.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://b-bengwonka.blogspot.com">Item</a></li>
    </ul>
    <br style="clear: left" />
    </div>


    Anda bisa mengganti tulisan yang berwarna hijau dengan tulisan yang anda mau, dan tulisan itu akan masuk ke menu pada blog anda, berikut dengan sub menu lainnya. ^_^

    udah deh blog anda mempunyai menu-menu yang banyak, bisa anda tambahkan sampe gumoh kalo perlu. :p

    semoga bermanfaat. SALAM INFORMATIKA ^_^

Popular Posts

@bambaldii Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Bambang Bayu Aldi | Bloggerized by Bambang Bayu Aldi - | Affiliate Network Reviews