Demo :
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.glossymenu{
margin:5px 0;
padding:0;
width:170px; /*lebar menu*/
border:1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXryjbAgP4G6zWcDZ5cWixbFQzni_yrZ6UccCqEsED12hlwUDnpMGYnFjKMoxA9mJfN91geDlyOxhLuRXoY4-xNs-ET7MiLCVVgFJNfagfCEVukEqYIRe3GSx-ooYoxcAktpeT0t_JWK2d/s1600/glossyback-Nano+Yulianto.gif) repeat-x bottom left;
font:bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color:white;
display:block;
position:relative;
width:auto;
padding:4px 0;
padding-left:10px;
text-decoration:none;
}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}
.glossymenu a.menuitem .statusicon{
position:absolute;
top:5px;
right:5px;
border:none;
}
.glossymenu a.menuitem:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3KKD4xGxkzkQdsku9DmBfEwgn2c6SrJoMnCneFFK5QrUV_uw0UtVpGlkDTWrFvzzyutF8R09Fs7hvajeHYQTSP6Lojh67XWhoXKxucymgznu_Lw5JFRcgmyH6VJlG-z5HWV-hriqQvb_/s1600/glossyback2-Nano+Yulianto.gif);
}
.glossymenu div.kategori{
background:white;
}
.glossymenu div.kategori ul{
list-style-type:none;
margin:0;
padding:0;
}
.glossymenu div.kategori ul li{
border-bottom:1px solid blue;
}
.glossymenu div.kategori ul li a{
display:block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color:black;
text-decoration:none;
padding:2px 0;
padding-left:10px;
}
.glossymenu div.kategori ul li a:hover{
background:lightblue;
}
Langkah kedua > Penempatan URL dan JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Accordion%20Konten.js"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "nanocord",
contentclass: "kategori",
revealtype: "click", //bisa diganti : "click", "clickgo", atau "mouseover"
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", ""],
togglehtml: ["suffix", "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbq7JxT88IsPLN0EB8zhB1Z5Uk-DBjLLRdmpeIERTcYxRe_F75ZqkR2LbXyHkg3IbxgYqdVFt-gHDYnQPJgMGUgfZkZnjqctxOBjrV_sG0EbZoDmelCtgpRFaDk3e0rf8WDNmRaCyZtcOB/s1600/Nano+Yulianto+-+plus.gif' class='statusicon' />", "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6hIBtiDDNUWabp2SunYPwvgJUvPWNYncwnAuntiPZT-J9rW0usnBfSd6lPaHvW9Vyt1gHZZ3ZocoqZgcM0ZNaXE_u9-f1sZzc2nVGbIWVsUWbNHJN_LPf4mrsjAxy656H0AfVetix4_VT/s1600/Nano+Yulianto+-+minus.gif' class='statusicon' />"],
animatespeed: "normal", //bisa diganti : "fast", "normal", atau "slow"
oninit:function(expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
</script>
Teks berwarna merah, jika sudah ada tidak perlu lagi...!.
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div class="glossymenu">
<a class="menuitem" href="/">Home</a>
<a class="menuitem nanocord" href="#">Contoh Accord</a>
<div class="kategori">
<ul>
<li><a href="URL-Anda">Contoh 1</a></li>
<li><a href="URL-Anda">Contoh 2</a></li>
<li><a href="URL-Anda">Contoh 3</a></li>
<li><a href="URL-Anda">Contoh 4</a></li>
<li><a href="URL-Anda">Contoh 5</a></li>
</ul>
</div>
<a class="menuitem" href="URL-Anda">JavaScript Blogger</a>
<a class="menuitem" href="URL-Anda">Template Blogger</a>
<a class="menuitem nanocord" href="#">Contoh</a>
<div class="kategori">
<ul>
<li><a href="URL-Anda">Contoh 1</a></li>
<li><a href="URL-Anda">Contoh 2</a></li>
<li><a href="URL-Anda">Contoh 3</a></li>
<li><a href="URL-Anda">Contoh 4</a></li>
<li><a href="URL-Anda">Contoh 5</a></li>
</ul>
</div>
<a class="menuitem" href="URL-Anda" style="border-bottom:none;">Tutorial</a>
</div>
Alhamdulillah
2 comments:
kalau mau di atur width nya kog bisa ngak,
aku cari di file js nya ga' ada pengaturan width
...
:))
bro Ryan kurang teliti... :)
ada dikode CSS bro, ada dikode CSS paling atas... disampingnya sudah saya tulisin lebar menu...
selamat berkreasi... :D
Posting Komentar