Cara Membuat Menu Dropdown 2

Cara Membuat Menu Dropdown, merupakan salah satu cara untuk menghemat tempat. Link akan disatukan menjadi satu kolom yang jika di pilih maka Link akan menggulung memanjang ke bawah dan jika tidak di pilih akan menggulung menjadi Link yang tersembunyi.Tapi cara yang akan dibahas Dropdown yang ditaruh dibawah header.

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://vikrymadz.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://vikrymadz.blogspot.com">Item</a></li>
</ul>
<br style="clear: left" />
</div>

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


Selamat Mencoba