Cara membuat menu accordion memakai CSS

Cara membuat menu accordion memakai CSS | Pasti anda seringkali melihat menu tersebut di blog orang lain yang sedang anda kunjungi, dimana tampilan menu accordion tersebut kelihatan begitu bagus sekali. Nah bagi anda yang ingin memasang pada widget blog anda, saya akan share bagaimana cara bikin menu accordion dengan CSS.

Berikut langkah-langkah membuat menu accordion css pada blogspot :
1. Login ke blogger
2. Rancangan => Edit HTML
3. Silahkan anda cari kode ]]></b:skin> dengan ctrl + F biar cepat
4. Lalu copy kode di bawah ini dan letakkan di atas 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 Template

Untuk langkah berikutnya yaitu :

1. Pada Page Elements
2. Tambah Gadget
3. HTML/JavaScript
4. Selanjutnya copy paste kode di bawah ini ke dalam HTML/Javascript

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

Silahkan diisi dengan teks atau widget anda

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

Silahkan diisi dengan teks atau widget anda

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

Silahkan diisi dengan teks atau widget anda

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

5. Selesai, save dan lihat hasilnya

Keterangan :
Tulisan yang saya warnai pink, ubah dengan selera anda.

Cukup sampai disini dulu pembahasan mengenai cara membuat menu accordion dengan CSS pada Blogspot / Blogger, semoga bermanfaat dan sukses untuk anda.