Cara Memasang Menu Accordion di Blog

Cara Memasang 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.

Menu Accordion adalah berupa susunan menu yang di susun secara vertikal, tentulah berbeda sekali dengan menu horisontal ( baca : cara membuat menu horisontal di blog )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. Logi 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 solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #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??
Previous
Next Post »

57 comments

Write comments
03:59:00 delete

mantap sob tp sayang gk ada demox.., saran sy bikin lg link khusus tuk demo., :)

Reply
avatar
will123
AUTHOR
07:10:00 delete

Makasih gan infonya,

Reply
avatar
Tian
AUTHOR
16:31:00 delete

@Rohis FacebookOk sob... diterima sarannya... entar ane bikin.....

makasih ya!!!

Reply
avatar
saswin
AUTHOR
08:16:00 delete

terima kasih backlinknya

Reply
avatar
06:46:00 delete

makasih sob..tar ane coba

Reply
avatar
01:34:00 delete

terimakasih banyak atas tutorialnya gan

Reply
avatar
Unknown
AUTHOR
16:55:00 delete

Itu warnanye kagak bisa di ganti gan ?

Reply
avatar
Unknown
AUTHOR
18:20:00 delete

bagussss tapi kurang yah

Reply
avatar
Inspironi
AUTHOR
08:24:00 delete

Lagi nyari accordion for blogger eh nyasar ke sini :)

Reply
avatar
Unknown
AUTHOR
02:50:00 delete

bos mana artikel terbarunya?

Reply
avatar
20:30:00 delete

saya sering berkunjung di blog-blog, postingan ini sangat menarik serta enak dibaca.... saya berharap bisa berkunjung lagi

Reply
avatar
20:33:00 delete

terima kasih banyak untuk berbagi informasi ... Semoga Tuhan memberikan yang terbaik buat Kita Semua

Reply
avatar
Anonymous
AUTHOR
13:43:00 delete

http://cherryliarasanty.blogspot.com

Reply
avatar
04:27:00 delete

kl bikin daftar isi gmn ya bro

Reply
avatar
05:19:00 delete

hebat gan,tq infonya

Reply
avatar
05:20:00 delete

Mantab bro infonya,tq

Reply
avatar
Unknown
AUTHOR
19:40:00 delete

terima kasih sharingnya...ini memang yang saya cari-cari... :)

Reply
avatar
06:49:00 delete

Langsung di test gan,tq

Reply
avatar
Dien
AUTHOR
12:09:00 delete

makasih gan. sya sangta terbantu

Reply
avatar
Sadewa
AUTHOR
02:56:00 delete

mksih sob infonya.. menarik jga nih tak coba yhh?? linkbacknya yahh....

Reply
avatar
Unknown
AUTHOR
13:45:00 delete

makasih y gan info nya,,,,ane jd banyak belajar,,,kpn2 mampir y ke gubuk ane "toinkzz.blogspot.com"

Reply
avatar
weber
AUTHOR
23:00:00 delete

cara mengganti warna accordionnya bagaimana caranya gan?? bir cocok sama warna blog saya gan
ni blog saya gan http://webnewswithin.blogspot.com
thanks

Reply
avatar
00:24:00 delete

maksud dari "widget" cara memasukkannya gimana ya Om?

Reply
avatar
Unknown
AUTHOR
01:31:00 delete

Ccd pagerank palsu dipamerin

Reply
avatar
topSpot
AUTHOR
03:59:00 delete

Kyknya udah gk work lagi ya! Border menu nya gk muncul!

Reply
avatar
22:38:00 delete

makasih atas ilmunya dan salam kenal aza mas

Reply
avatar
20:04:00 delete

infonya keren baget

Reply
avatar
22:16:00 delete

Kunjung balik ke http://rizaladitiyosupendi.blogspot.com/

Reply
avatar
Unknown
AUTHOR
20:04:00 delete

bisa dicoba nh gan kunjungan agan saya tunggu www.naufalthedarkness.blogspot.com

Reply
avatar
01:27:00 delete

Sederhana tapi sangat bermanfaat,sob..

Reply
avatar
14:46:00 delete

ini dia info yg saya cari..langsung praktekkin ah

Reply
avatar
Unknown
AUTHOR
20:00:00 delete

Artikelnya sangat bermanfaat fren untuk saya orang baru didunia blogger,tapi kadang-kadang masih ada istilah2 yang saya tidak mengerti.
Misalnya istiilah "rancangan" diblogspot ditulisnya apa? Saya cari tidak ketemu.Terimakasih

Reply
avatar
Fandri Azwar
AUTHOR
22:42:00 delete

Thaks sobat

Reply
avatar
SAKE XP
AUTHOR
22:17:00 delete

mantap mas..

Reply
avatar
Anonymous
AUTHOR
06:46:00 delete

Bagus banget...pengen pasang juga

Reply
avatar
22:57:00 delete

terima kasih mas infonya

Reply
avatar
18:30:00 delete

makasih bang infonya

Reply
avatar
Anonymous
AUTHOR
09:42:00 delete

Thanks Infonya, bermanfaat banget.......mau langsung praktekin nih.

Reply
avatar
Unknown
AUTHOR
15:14:00 delete

Keren menu accordion nya bro! THANKS :)

Reply
avatar
RATnet
AUTHOR
02:21:00 delete

kunjung balik bro www.ratnetworkww.blospot.com

Reply
avatar
Unknown
AUTHOR
18:04:00 delete

.
Thankz sob...
corry ya..
ane msh pemula..
klo ad yg ane bikin/copas punya sob...
maaf ya...
hehehe

Reply
avatar
Unknown
AUTHOR
06:09:00 delete

mantap gan infonya :)

kunjung balik + follow blog sya yahh

www.novandiehard19.blogspot.com

Reply
avatar
09:46:00 delete

bagus sekali triknya gan, tidak membuat pusing kepala , Terimakasih atas artikelnya gan. salam kenal dan salam blogger

Reply
avatar
chip sakti
AUTHOR
15:58:00 delete

Infonya sangat membantu sekali Gan, ijin selancar di blog Anda lebih lanjut.

Reply
avatar
zaki
AUTHOR
22:59:00 delete

makasih ya sob.. sangat bermanfaat :)

Reply
avatar
20:34:00 delete

terima kasih gan infonya semoga bermanfaat bagi orang lain

Reply
avatar
MSsholeh
AUTHOR
04:20:00 delete

nice artikel bang !

Reply
avatar
Trackers
AUTHOR
01:21:00 delete

tutornya keren gan, makasih

Reply
avatar
Trend Center
AUTHOR
03:41:00 delete

thanks-infonya
aku-sukses-gan

Reply
avatar
08:41:00 delete

Keren sob... ini yang dicari cari dari kemarin... kebetulan ane juga mosting tentang tutorial sob... mungkin sekiranya kita bisa saling berbagi... ini blog ane:

Cara Mudah Membuat Animasi Gif Cantik | Akhbar Islam

Reply
avatar
11:14:00 delete

terima-kasih-atas-informasinya

Reply
avatar
Unknown
AUTHOR
03:33:00 delete

saya masih bingung nyari ]]> nya
jadi saya bingung mau paste code dimana ..

mohon pencerahannya gan ?? :(

Reply
avatar
Anonymous
AUTHOR
20:01:00 delete

sukses brow mkasih atas infonya

Reply
avatar