0 Cara Membuat Menu Accordion di Blog

Cara Memasang, Membuat atau Membikin Menu Accordion di Blogspot ini adalah re-post dari posting lawas saya yang berjudul cara membuat menu accordion blogger yang nggak masuk ke hatinya om gugel. Karna itu diharapkan mudah - mudahan dengan Re-post ( posting ulang ) ini, artikel saya yang telah saya hapus tersebut bisa terindeks lagi meskipun dengan URL yang berbeda. Walaupun saya sendiri tidak memakai menu ini, tapi saya sudah coba kok,, dan  100% Berhasil... ^_^

Menu Accordion adalah berupa susunan menu yang di susun secara vertikal, tentulah berbeda sekali dengan menu horisontal yang biasa sobat jumpai, mungkin ini adalah salah satu solusi menyembunyikan widget yang terlalu banyak di halaman blog sobat.  Sobat yang tertarik pasang menu accordion di blogger, silahkan ikuti tutorial berikut.

1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML
3. Kemudian letakkan kode berikut di atas 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 dashed #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post.post blockquote{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi58j1wyAzESE9TVghqFdy236CBdLOYhulpfpidhBru9XOTX2rarzKytWaSHrJzaLmIdYU5K4247_oDhWvZ45iVE3v7-w6u56ur4vgYnHptjBFkGJCrZZTcWDB5p1BrlEQUvIak6P5tmRE/s1600/bulb-off.png) no-repeat right bottom; margin:0 20px; padding:20px 80px 20px 20px; color:#595959; font:small verdana,arial,sans-serif; border:1px Dashed #3300FF} .post blockquote:hover{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajk0yjJpF3w91Y1kfjzAy_bbGp4jFFTWNEdXYRz1fh44AYKTtosmR0q72efv7fMfON8RaMqGxAczf_VkAKZi9sN02C_HfA8FOlhOWiIo8dRGOtaE9pOZubkAOxYfwzj4wzl9fwqJFORk/s1600/bulb-on.png) no-repeat right bottom; color:#e0e089" />border-bottom:2px dashed #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

4. Klik save template dan kita akan menuju ke penambahan gadget.
5. Klik Rancangan --> Elemen laman--> Tambah gadget--> Pilih HTML/Javascript
6. Masukkan kode berikut ke dalam kotak yang di sediakan.

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

7. Klik save dan lihat hasilnya... Gimana?? sederhana dan mudah bukan?? 

== SEMOGA BERMANFAT ==

Yang mau copas sertakan sumber ya... Thanks *_*

RB Related Post:

Tutorial Blog

• Cara Menghilangkan Nomor Pada Blog Archive
• Membuat Efek Link Memudar Blog With JQuery
• Cara Membuat Scroll Pada Widget Blog
• 3 Widget Indcread's dengan efek Bergetar Dan Onklik
• Anti Klik Kanan Dengan Gambar | New Version
• cara membuat menu di bawah header
• Pasang Widget Alexa Rank Tanpa perlu Register
• Membuat Link Sumber Pada Postingan Yang Di Copas Orang Lain
• DIBUKA Jasa Pembuatan Blogg
• Fanspage Facebook Melayang DI Blog
• Download Adobe Photoshop cs 6
• Cara Membuat BlogRoll
• Cara Merubah Warna Text Ketika di Blok
• Post Title
• Disable Klik Kanan, CTRL+A (Block) & CTRL+U (Source) di Blog
• Cara Membuat Tooltip Otomatis Semua Title
• Cara Membuat Link Membuka Di TAB Baru
• Yahoo.Com Template Blogger
• Free Download Template Green Transparent | Cah Dabloeng
• Cara Ganti Teplate
• Cara Membuat Background Petir
• Download Lagu MP3 Player (Tanpa Perantara)|™Rahman De Cheaterz™
• Compress Html Kalian |™Rahman De Cheaterz™
• Membuat Efek Link Memudar Blog With JQuery