Cara Membuat Multi Level Drop Down Header Menu di Blogger / Blogspot Anda

Ingin membuat yang seperti ini?
Oleh yang menciptakannya ini dinamakan Multi Level Drop Down Header Menu.

Caranya mudah saja, ikuti langkah berikut:

1. Log In ke Blogger, melalui Dasbor Anda, klik Tata Letak, Lalu klik Edit HTML

2. Expand Template Widget, lalu cari (ctrl+F) kode berikut di dalam kotak HTML:

</head>

3. Letakkan kode berikut persis sebelum 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>

4. Klik SIMPAN TEMPLATE.

5. Sekarang kembali ke menu TATA LETAK dan klik menu ELEMEN HALAMAN, lalu klik TAMBAHKAN GADGET, pilih gadget HTML/JAVASCRIPT.

6. copy kode berikut ke dalam gadget HTML/JAVASCRIPT Anda:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.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://bloggerstop.net">Blogger Help</a></li>
</ul>
<br style="clear: left" />
</div>

7. Klik SIMPAN kemudian letakkan GADGET baru Anda persis di bawah Header.

8. Selesai, kini Anda memiliki sebuah Multi Level Drop Down Menu di Blog Anda!

Diterjemahkan dari http://bloggerstop.net/.