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

10 komentar:

UmbulMartani SCTV, 12 December 2010 at 04:16 | [Reply]

malam .. mampir untuk silatuhrahmi Siapalagi.com

Unknown, 20 December 2010 at 00:58 | [Reply]

galoga link ku yang www.ilhamz.co.tv minta' tolong di ganti ke www.ilhamz.blogspot.com

Unknown, 20 December 2010 at 01:01 | [Reply]

galoga,sekali lagi link ku tolong diganti dari www.ilhamz.co.tv ke www.ilhamz.blogspot.com

Sandynet, 20 January 2011 at 20:38 | [Reply]

gan tukeran link...
linkmu udh saya pasang tinggal di km gan...
ditunggu..

Fajar Karunia, 23 January 2011 at 07:25 | [Reply]

thanks kakak

Admin, 4 February 2011 at 18:16 | [Reply]

wah... mantab shob, sekarang lagi sibuk yah???
ana tunggu posting selanjutnya.. :)

Anonymous, 23 December 2011 at 04:50 | [Reply]

thanks atas infonya yang sangat bermanfaat dan mudah dicerna, salam kenal
http://caramembuatyangakumau.blogspot.com

Anonymous, 27 April 2012 at 06:09 | [Reply]

keren sob

Unknown, 29 June 2012 at 06:25 | [Reply]

di coba sob ilmunya

v1rus, 27 September 2012 at 15:45 | [Reply]

thank's info nya
kunjungi balik gan

Post a comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home