CSS3 | Membuat Menu Accordion

Akhirnya saya kembali di sini membawa posting baru bertemakan CSS3 dan Accordion, yaitu tentang Cara Membuat Menu Accordion Dengan CSS3. Jika sebelum-sebelumnya saya pernah memposting tentang efek Accordion maka kali ini agak berbeda, kenapa? itu di karenakan jika yang sebelumnya menggunkan JavaScript maka kali ini hanya menggunakan CSS3 saja. Berikut ini adalah DEMO-nya. Langsung saja ke Step.By.Step !!!

1. Login ke blog anda
2. Masuk ke Deisgn > Edit HTML
3. Cari kode ]]></b:skin>
4. Masukan kode berikut sebelum kode ]]></b:skin>

#acc{background:#666;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

5. Save Templates.

Eitsss tunggu tunggu dulu. Proses belum selesai. Setelah anda mengesave templates anda, sekarang  masuk ke Page Elements

6. Sekarang tambahkan tambah gadget dengan klik Add a Gadget
7. Pilih HTML/JavaScript
8. Masukan kode berikut di dalamnya

<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
</div>

8. Save

Nah sekarang baru selesai sudah main-main kita hahaha. Jangan lupa comment share and likenya ya makasih hehe