Komentar

Kamis, 09 Desember 2010

Home » , , , » Tips Blogging : Cara Membuat Menu Accordian Dengan CSS

Tips Blogging : Cara Membuat Menu Accordian Dengan CSS

Menu Accordian atau menu yang bisa di hide show atau dispoiler sehingga bermanfaat agar blog kita tampilannya tidak terlalu penuh pada widget sidebarnya. Untuk lebih jelasnya lihat pada gambar dibawah ini :



Tertarik ingin membuatnya, ikuti langkah berikut :
Ok Untuk Tata Caranya Adalah Sebagai berikut.

  • Login Blogger.
  • Klik Rancangan
  • Add gadget >> Pilih HTML
  • Kemudian masukan Code Script berikut : 



<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>



Setelah Itu Simpan/Save,

Kemudian Setelah tersimpan masuk Edit HTML
Masukkan kode berikut ini sebelum kode ]]></b:skin>


#acc{background:#666;font:13px trebuchet ms;
line-height:2.4em;padding:5px;margin:0;}
#acc h3{background:url(http://3.bp.blogspot.com/_VYsrqsZytms/TGp72H9l22I/AAAAAAAAAd8/yLYY31On8_Y/s1600/main-bg.png);padding:5px 5px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #000;}
#acc h3 a{color:#000}
#acc h3 a:hover{color:#fff}
#acc .post{background:#000;color:#fff;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:250px;overflow:auto;}
#acc :target h3 a{color:#FAF103}



Keterangan :

Code ini :
{display:block;height:250px;overflow:auto;} : 250px Bisa kamu rubah sesuai kebutuhan.
#acc h3{background:url(http://3.bp.blogspot.com/_VYsrqsZytms/TGp72H9l22I/AAAAAAAAAd8/yLYY31On8_Y/s1600/main-bg.png) : background bisa kamu ganti sesuai keinginan.

Artikel Terkait:

3 komentar:

Ardy mengatakan...

thanks Ilmunya,,kapan2 boleh di coba neh,,,

hady mengatakan...

bro ad app antivrus luar ga yg pro ...
kan smadav anti v.dalam ...
thank's ya bro....
dtnggu ya anti v luar yg pro........

Hacker666Virus mengatakan...

thanks atas tipsnya

Posting Komentar

Berkomentarlah Dengan Baik dan Sopan ....!!
Jika Ada Kerusakan atau Link Download Tidak Tersedia, Silahkan Lakukan Pemberitahuan Pada Kotak Komentar Di Bawah Ini.

Copyright Text

By Lailawati
HEAD LINE NEWS CREATIVE BY ELLA BLOG |UNTUK MEMUDAHKAN MENDOWNLOAD FILE, GUNAKAN INTERNET DOWNLOAD MANAGER (IDM) |TERIMAKASIH ATAS KUNJUNGANNYA |