Cara Membuat Drop Down dengan Sub Tab

Tutorial | Setelah memposting Kumpulan Drop Down Keren Dan Cara Membuatnya, Blogger Tutorial akan berbagi drop down dengan sub tabnya. Drop down kali ini berbeda dengan yang kemarin aku posting, soalnya ketika tab pertama muncul, masih ada tab-tab yang lainnya yang ada dalam tab pertama. rumit yah sobat? hehee. kalo bingung ngbayanginnya, silahkan lihat preview dibawah ini :

Preview :

 

Langsung saja yaa.

Cara memasang Drop Down dengan sub tag :

• Silahkan Login ke blogger anda
• Rancangan > Edit Html ( jangan lupa Centang " Expands Template Widget")
• cari kode </head> tekan ctrl+f untuk memudahkan mencarinya.
• 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>

• Simpan
• lalu buka menu elemen halaman (tata letak)
• Lalu add a gadget pilih HTML/JavaScript
• 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>

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

 Sekian sobat postingan Blogger Tutorial tentang Cara membuat menu dropdown dengan sub tag nya., semoga berhasil :)