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:

Tutorial

• Cara Download Di Putlocker
• Cara mengetahui Blog Dofollow atau Nofollow
• Cara Mengubah Blog Menjadi Dofollow
• Tips SEO: Mengubah Judul Blog di Belakang Judul Posting agar Blog SEO Friendly
• How To Make Random Post (2)
• Instalasi dan Penggunaan Software Pelacak (Prey)
• Mengubah Older Post/Newer Post dengan Navigasi Nomer Halaman
• Membuat Recent Comments Menggunakan Widget Blog
• Recent Post Scrolling

Blogging

• Pentingnya Ping Untuk Blog Anda
• Kelebihan dan Kekurangan Blog Dofollow
• Cara mengetahui Blog Dofollow atau Nofollow
• Cara Mengubah Blog Menjadi Dofollow
• How To Make Random Post (2)
• Mengubah Older Post/Newer Post dengan Navigasi Nomer Halaman
• Membuat Recent Comments Menggunakan Widget Blog
• Recent Post Scrolling
• Membuat Blog anda menjadi versi mobile
• Bermacam Kreasi 'Read More'
• Kumpulan Logo Blog DoFollow
• Cara Mengecek Kecepatan Loading Blog Anda
• Cara Membuat Head Line News
• Cara membuat "Related Post" dibawah Posting.
• Cara membuat Link terbuka di Tab baru
• Cara Membuat teks berjalan (Efek Marque)
• Cara Mengganti Warna Background Header
• Cara Menulis Kode HTML
• HIDE AND SHOW SHOUTMIX

Tips and Trik

• Tips Mengoptimalkan Fungsi Kamera di Setiap Smartphone
• Tips Mengatasi Lupa Pasword BIOS
• Cara Mendapatkan Uang dari Adf.ly Dengan Mudah
• Cara Cepat Menaikkan Pagerank dan Backlink Blog Anda
• Tips Mempercepat Sinyal WIFI Pada Windows Seven
• Sharing Printer Pada Jaringan LAN
• Tutorial : Cara Menjalankan Iso File & NRG Dengan Ultra Iso (CD Virtual)
• Cara Cepat mendapatkan Golden Eggs Game Angry Birds
• Pentingnya Ping Untuk Blog Anda
• Cara mengetahui Blog Dofollow atau Nofollow
• Tips SEO: Cara membuat Breadcrumb Menu Navigation
• Smadav Rev.8.3 Pro + Key
• Instalasi dan Penggunaan Software Pelacak (Prey)
• Membuat Blog anda menjadi versi mobile
• Tips membersihkan CD-DVD yang tergores
• Alternatif membuka Office 2007
• Bermacam Kreasi 'Read More'
• Kumpulan Logo Blog DoFollow
• Cara Mengecek Kecepatan Loading Blog Anda
• Cara Membuat Head Line News
• Chit Chat For Facebook
• Cara membuat "Related Post" dibawah Posting.
• Cara membuat Link terbuka di Tab baru
• Cara Membuat teks berjalan (Efek Marque)