Demo :
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.nanocord {
width: 180px; /* lebarnya disesuaikan */
}
.nanocord .menuheader{
font: bold 14px Arial;
color: white;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2CCIN4HOESy9DYO3VCQljT9AMq6nk75lC9UPjpkzuzC8_JYGvEO3Ap4vEFTgpHBGFh5EoVi70MEg2zxZmJ0W2pFTFSLdd23mB3UOsw655iTmP-mkyW-M_6jDo5H_l3F_hdn7DjZzH_8dc/s1600/titlebar-Nano+Yulianto.png) repeat-x center left;
margin-bottom: 10px;
text-transform: uppercase;
padding: 4px 0 4px 10px;
cursor: hand;
cursor: pointer;
}
.nanocord .openheader{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiklwSAFoML4mvM7G2qUemmYd0liNTeVuPgp79xY2l3KQFKbyDTVOHYq4aRordMt1gl5QxO_CX0OeTYtITWkux2D_w2S_3cecX89uDVUhCwyfcprMl4MxV23EiG2o0Guljq3jY3sArxF-sW/s1600/titlebar-active-Nano+Yulianto.png);
}
.nanocord ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px;
}
.nanocord ul li{
padding-bottom: 2px;
}
.nanocord ul li a{
color: #A70303;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVtiH4mERPgB2xw_DbK3KjcsF8B8XiznfxQML61ijCjXbzmIeUNTNXJIK49PRGOguGYQX0P9jW-i4eAGS9dS8zHQImbU9kiOiOSPFRzBrmIVhUDLD-e2y5hWv3vItPKCtfwoHUsxtV-c_c/s1600/arrowbullet-Nano+Yulianto.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.nanocord ul li a:visited{
color: #A70303;
}
.nanocord ul li a:hover{
color: #A70303;
background-color: #F3F3F3;
}
.nanocord ul li .subbuka{
background: lightblue !important; /* warna background subcontoh tidak aktif */
}
.nanocord ul li .subtutup{
background: lightgreen !important; /* warna background subcontoh aktif */
}
.nanocord ul li a.subnanocord:hover{
background: lightblue; /* warna background subcontoh tidak aktif dengan kursor mouse diatas */
}
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: "expandable",
contentclass: "categoryitems",
revealtype: "click", //bisa diganti : "click", "clickgo", atau "mouseover"
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["prefix", "", ""],
animatespeed: "normal", //bisa diganti : "fast", "normal", atau "slow"
oninit:function(expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
ddaccordion.init({
headerclass: "subnanocord",
contentclass: "subcategoryitems",
revealtype: "click", //bisa diganti : "click", "clickgo", atau "mouseover"
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["subbuka", "subtutup"],
togglehtml: ["none", "", ""],
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="nanocord">
<h3 class="menuheader expandable">Panduan Blogger</h3>
<ul class="categoryitems">
<li><a href="URL-Anda">Contoh 1</a></li>
<li><a href="#" class="subnanocord">Contoh 2</a>
<ul class="subcategoryitems" style="margin-left: 15px">
<li><a href="URL-Anda">Sub Contoh 1</a></li>
<li><a href="URL-Anda">Sub Contoh 2</a></li>
<li><a href="URL-Anda">Sub Contoh 3</a></li>
<li><a href="URL-Anda">Sub Contoh 4</a></li>
<li><a href="URL-Anda">Sub Contoh 5</a></li>
</ul>
</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>
<li><a href="URL-Anda">Contoh 6</a></li>
<li><a href="URL-Anda">Contoh 7</a></li>
</ul>
<h3 class="menuheader expandable">SEO</h3>
<ul class="categoryitems">
<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>
<li><a href="URL-Anda">Contoh 6</a></li>
</ul>
<h3 class="menuheader expandable">Template Blogger</h3>
<ul class="categoryitems">
<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>
Credit : Dynamic Drive
Alhamdulillah
4 comments:
hmm... saya lebih suka Accordion glossy yang biru...
kalau saya yang ini sukanya bro... hehehe. mungkin saya warna hitam...
siiipp....
pas dengan warna template saya.
padahal td pake glossy yg biru.
hehe.
:))
siiippp... yang mana aja juga boleh...
Posting Komentar