Home > JavaScript Blogger > Accordion Menu Hitam dan Merah
Demo :
Panduan Blogger
SEO
Template Blogger
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/AVvXsEi_vbinaW86Cn-tRRk67x7u7SbqMH_Mbrtl0uuwtl8DyMGiseyPWBBXcP-peQVD2dhhLPCliQmoR7gJpXAoCX13ldfUX8mElqiCHj6P1ja7QcA0KPx04cQDjAU0pw-nw-i9kGOw_MNXJJK1/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/AVvXsEgnJZ0ht8EUkeDzZbH_Ihs1IhjWShmEDlPFm50xWdpUp_XvgB2BhdtqVG9gN0MOCBcNZ5gcCq5Mz_-5NQ1C6VoBRFoKuX5kDOxndt77Obg7MGdCgHlXbEuatUuNyXFrXCmFTev1e-VT2WPf/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/AVvXsEgeIQ3eQYmkjp97IwoVol93pbXmYY-w4ZFsu-A6CqdfiM4xzovGtkskoJGT7PEP3kmWcVRwxPL5cY8okXMqxFeBxCmDknVQ5ZwdZ18JC5bcCKB8XBZHDpbqnJcf1PgICeIdFDeNIYtSAMUl/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
