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 ini tepat di atas ]]></b:skin> 

COPY SCRIPT

#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

 COPY SCRIPT

 &lt;div id=&quot;acc&quot;&gt;
&lt;div id=&quot;isi1&quot;&gt;
&lt;h3&gt;&lt;a href=&quot;#isi1&quot;&gt;Judul 1&lt;/a&gt;&lt;/h3&gt;
&lt;div class=&quot;post&quot;&gt;
Masukkan item anda disini,bisa berupa teks atau widget
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;isi2&quot;&gt;
&lt;h3&gt;&lt;a href=&quot;#isi2&quot;&gt;Judul 2&lt;/a&gt;&lt;/h3&gt;
&lt;div class=&quot;post&quot;&gt;
Masukkan item anda disini,bisa berupa teks atau widget
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;isi3&quot;&gt;
&lt;h3&gt;&lt;a href=&quot;#isi3&quot;&gt;Judul 3&lt;/a&gt;&lt;/h3&gt;
&lt;div class=&quot;post&quot;&gt;
Masukkan item anda disini,bisa berupa teks atau widget
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

And Save,Now Finish :)

Contoh ;

CONTOH

Judul 1

Masukkan item anda disini,bisa berupa teks atau widget

Judul 2

Masukkan item anda disini,bisa berupa teks atau widget

Judul 3

Masukkan item anda disini,bisa berupa teks atau widget