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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVnyG4taGBNU88N5tkO7oXqRDwyOTOhGh2NpKAkqJj_X2vqkBoVQ1-ycJbh_lekJUaocO6k0GUlKYNa83aKHI7wGueBA91FGKfj1V7_fM2k6A8y2JBz2eStPfJH-vnAvL37Mf143vb2Ogo/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/AVvXsEjVnyG4taGBNU88N5tkO7oXqRDwyOTOhGh2NpKAkqJj_X2vqkBoVQ1-ycJbh_lekJUaocO6k0GUlKYNa83aKHI7wGueBA91FGKfj1V7_fM2k6A8y2JBz2eStPfJH-vnAvL37Mf143vb2Ogo/s1600/main-bg.png) : background bisa kamu ganti sesuai keinginan.

Artikel Terkait: