Membuat Expanding menu di Blogger Posted by Muhammad Ikhsan , at 3:19 AM, in Labels: All, Tutorial

sudah lama pengen posting cara buat expanding mmenu diblog akhirnya sekarang baru bisa posting
contoh expanding menu bisa di lihat di sebelah kanan..... coba saja klik "motivasi", menarik bukan??? berikut langkah-langkahnya >>


Seperti biasa di Edit html

Copy paste code berikut di atas kode ]]></b:skin>
pada mozilla tekan Ctrl+f untuk memudahkan mencari codenya

ul#menu {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}

ul#menu ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}

ul#menu li,
ul#menu a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}

ul#menu li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}

ul#menu ol li {
border-bottom: none;
}

ul#menu ol li:before {
content: "- ";
}

ul#menu a {
text-decoration: none;
outline: none;
}

ul#menu a:hover {
color: #539dbc;
}

ul#menu a.active {
color: #be5028;
}


Langkah berikutnya paste code ini sebelum kode </head>


<script type="text/javascript" src="http://sites.google.com/site/akper4/expandingMenu.js"></script>

teman2 bisa mengganti source javascriptnya di hosting lain (takut over load) :)

Kemudian Di save.. Tapi belum selesai,, cekidot lagi dah...
BUka Element halaman add widget >> javascript/html paste kode ini

<ul id="menu">
<li>Menu Item 1
<ol>
<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>
</ol>
</li>
<li>Menu Item 2
<ol>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
<li><a href="#">Sub Item 2.3</a></li>
</ol>
</li>
<li>Menu Item 3
<ol>
<li><a href="#">Sub Item 3.1</a></li>
<li><a href="#">Sub Item 3.2</a></li>
<li><a href="#">Sub Item 3.3</a></li>
</ol>
</li>
<li>Menu Item 4
<ol>
<li><a href="#">Sub Item 4.1</a></li>
<li><a href="#">Sub Item 4.2</a></li>
<li><a href="#">Sub Item 4.3</a></li>
</ol>
</li>
<li>Menu Item 5
<ol>
<li><a href="#">Sub Item 5.1</a></li>
<li><a href="#">Sub Item 5.2</a></li>
<li><a href="#">Sub Item 5.3</a></li>
</ol>
</li>
</ul>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>


Item-itemnya tinggal teman-teman edit sendiri..
<li><a href="#">Sub Item 2.1</a></li>
tanda # di ganti dengan link tujuan, dan sub item 2.1 di ganti dengan judul dari link tujuan..