Banyak sobat blogger yang meminta tutorial tips trik Cara membuat menu Navigasi drop down karena saya sudah lama tidak posting Tips Trik blogger.
Oke Dech... langsung saja kali ini saya akan share cara membuat menu navigasi Drop Down. menu ini sangatlah penting untuk dipasang di blog kita, karena pengunjung akan menggunakannya untuk melihat isi semuayang ada di blog kita. pasti semua blo/ website memasang menu ini.
Langsung saja yaa.. cara memasang menu navigasi drop down di blog :
- 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>
5. Simpan
6. lalu buka menu elemen halaman (tata letak)
7. Lalu add a 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.
Good Luck's!!
