Cara Membuat Menu Accordion Dengan CSS

Cara Membuat Menu Accordion Dengan CSS

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

Cara Membuat Menu Accordion Dengan CSS. Yups Kali ini Blogging Is My Life aka share mengenai Cara Membuat Menu Accordion Dengan CSS. 

Sebelumnya sobat mungkin ada yang bertanya-tanya Menu Accordion itu seperti apa sih??



Ok Menu Accordion yang bisa disebut juga tab view, tapi tampilannya tidak seperti pada artikel INI yang horisontal tp yang saya share sekarang adalah yang tampilannya vertikal.

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

NB :
tulisan yang berwarna merah ganti dengan judul tab view sobat
tulisan yang berwarna biru ganti dengan isi tab view sobat

Good LUCK ^_^