Selamat sore sobat kali ini saya akan berbagi cara membuat menu navigasi horizontal Multi level Drop down, guna mempermudah dalam mengexplorasi blog sobat, adapun langkah-langkahnya sebagai berikut;
- Login ke Blogger dengan akun
- Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
- Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
- Letakkan script JQuery berikut sebelum tag </head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
- Catatan : bagi anda yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah ini abaikan saja
- Tambahkan juga script berikut setelah script JQuery yadi
<link rel="stylesheet" type="text/css" href="jqueryslidemenu.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="https://sites.google.com/site/bangkolis/javascript/maskolis.js">
</script>
- Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:
- Setelah itu tambahkan kode HTML berikut diatas <div id='header-wrapper'> (menu drop down diatas header), jika ingin meletakkan di bawah header cari kode penutup header seperti ini </div><!-- end header-wrapper --> kemudian letakkan dibawahnya :
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://antoncabon4u.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://antoncabon4u.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div> - Terakhir Save Template anda, dan lihat hasilnya.
Silahkan ganti kode yang saya beri warna dengan tulisan anda sendiri, itu dulu tutorial kali ini selamat mencoba.
Sumber: DISINI
Sumber: DISINI
"Watch your thoughts; they become words. Watch your words; they become actions. Watch your actions; they become habits. Watch your habits; they become character. Watch your character; it becomes your destiny." LaoTzu
0 komentar:
Posting Komentar