Cara Mudah Buat menu Accordion Dengan CSS

Menu Accordion ternyata sangat Membantu Kita Agar Tampilan Blog terlihat Lebih ramping,Karena menu accordion dengan CSS ini mampu membuat menu Spilover,dengan memasukan Code Widget Yang ingin Di buat Spilover atau Hide And show,Dan Apa Sajalah istilahnya itu .Tentunya Anda Bisa Menyembunyikan Widget Yang terkesan memenuhi Ruang Sidebar Sobat .
Cara Ini Saya rasa Cukup Mudah karena Murni Hanya Menggunakan Edit CSS,Tanpa Dukungan scrift Dari Dunia Lain

Ok Untuk Tata Caranya Adalah Sebagai berikut.

# login Blogger.
# klik Rancangan
# Add gadget >> Pilih HTML
Kemudian masukan Code scrift 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 > klik 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_NiMaJvpClS7N-tPX5NFyq_QRLCPA9TXII7QMog9kpmjXQN1Ri7radpWHBNHvJAQ6BAN3oUHzJPzCxCay4TBlkZLy5yvcXfS8wuBlktt74XwPMTmlTNzAivVdm2gBR1TpqOaVszEOC2fa/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_NiMaJvpClS7N-tPX5NFyq_QRLCPA9TXII7QMog9kpmjXQN1Ri7radpWHBNHvJAQ6BAN3oUHzJPzCxCay4TBlkZLy5yvcXfS8wuBlktt74XwPMTmlTNzAivVdm2gBR1TpqOaVszEOC2fa/s1600/main-bg.png) : background bisa kamu ganti sesuai keinginan.

(C) TOP BLOG | MOBIL KELUARGA IDEAL TERBAIK INDONESIA