Membuat menu accordion Posted by DSILAS , Monday, June 6, 2011 at 7:42 AM, in Labels: Membuat menu accordion

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

 #accr{

-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;font:12px trebuchet ms;
line-height:2.4em;padding:5px;margin:0;
}
#accr h3{
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;
background:-moz-linear-gradient(top, #051547, #999, #051547);;padding:5px 5px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #000;
}
#accr h3 a{
color:#000
}
#accr h3 a:hover{
color:#fff
}
#accr .post{
background:#000;
color:#fff;
padding:10px;
margin:10px 0px;
display:none;
border-bottom:2px solid #222;
}
#accr :target h3 + .post {
display:block;height:250px;overflow:auto;
}
#accr :target h3 a{
color:#FAF103
}

Simpan Template..........

Selanjutnya masuk ke menu Rancangan, elemen laman, tambah Gadget, Html/Java script , lalu simpan kode berikut:

<div id="accr">
<div id="isi1">
<h3>
<a href="#isi1">Widget 1</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget embed dan lainnya </div>
</div>
<div id="isi2">
<h3>
<a href="#isi2">Widget 2</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget embed dan lainnya </div>
</div>
<div id="isi3">
<h3>
<a href="#isi3">Widget 3</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget embed dan lainnya</div>
</div>
</div>

Simpan.....


selesai.........