+==xXx(EXPLORATION)+==xXx==

Home » Tips Blogger » Membuat Menu Accordion

Membuat Menu Accordion

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. 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
}

8. Save

9. 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>