Cara Membuat Menu Accordion Dengan CSS

Cara Membuat Menu Accordion Dengan CSS

1. Login blog
2. Rancangan -> Edit Html (centang "expand widget template")
3. Cari kode ]]></b:skin>
4. Lalu taruh kode dibawah ini diatas kode ]]></b:skin>

#acc{background:#ffffff;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: red} #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. Simpan
6. Lalu buka Rancangan -> tata letak -> add gadget (HTML/JavaScript)
7. Masukkan kode dibawah ini

<div id="acc"> <div id="isi1">

<h3><a href="#isi1">Judul 1</a></h3> <div class="post"> Masukkan item sobat 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. Simpan dan lihat hasilnya

TERIMA KASIH TELAH MEMBACA , BILA ADA SESUATU YANG KURANG BERKENAN MOHON DI MAAAFKAN

Achmad - 19.57

Tweet