Dropdown Multi Level Menu Blog

Nah Kali Ini Saya akan posting cara membuat menu dropdown multilevel pada blog seperti dibawah ini :


Tapi Sebelumnya Copy Dulu HTML Anda Untuk Back-Up,Atau Download Template Lengkap
1. Log In Ke Blogger>>Rancangan>>Edit HTML
2. Copy Kan Code Di Bawah Ini Sebelum Code </Head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

3.Copy Code Di Bawah Ini Sebelum Code Jquery Di Atas

< <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" /><br /> <br /> <!--[if lte IE 7]><br /> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style><br /> <![endif]--><br /> <br /> <br /> <script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]>:

<<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div><div align="center"></div><div align="center"><textarea cols="55" name="txt" rows="100" style="height: 144px; width: 300px;" wrap="VIRTUAL"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://amatullah83.blogspot.com/">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Folder 1</a><br /> <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><br /> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a><br /> <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><br /> <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://amatullah83.blogspot.com/">Item 4</a></li> </ul> <br style="clear: left" /><br /> </div><br /> <br /> <br />

6. Simpan template maka Hasilnya seperti pada gambar di atas