Label 10

Home » » Cara Membuat Menu Bar Drop Down | Menubar

Cara Membuat Menu Bar Drop Down | Menubar

Written By Ilmu MUFA on Minggu, 16 Oktober 2011 | 22.42

Mendesain Ulang dan membuat ualang Blogger saya. kali ini saya posting aja mengenai Cara Membuat Menu Bar Drop Down. Okey jadi langsung saya share disini saja.


 



Cara Membuat Menu Bar Drop Down
1. login blog
2. rancangan >> edit HTML
3. cari kode </head> tekan ctrl+f untuk memudahkan mencarinya
4. lalu taruh kode dibawah ini 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>

5. simpan.
6. lalu buka menu elemen halaman (tata letak)
7. tambah gadget pilih HTML/JavaScript
8. masukkan kode dibawah ini

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://open-download-free.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://open-download-free.blogspot.com/">Item</a></li>
</ul>
<br style="clear: left" />
</div>


9. simpan, lalu letakkan gadget ini persis dibawah header lalu save lagi :)

10. Selesai

SELAMAT MENCOBA
Share this article :

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. test - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger