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;4. Klik save template dan kita akan menuju ke penambahan gadget.
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}
5. Klik Rancangan --> Elemen laman--> Tambah gadget--> Pilih HTML/Javascript
6. Masukkan kode berikut ke dalam kotak yang di sediakan.
<div id="acc">7. Klik save dan lihat hasilnya... Gimana?? sederhana dan mudah bukan??
<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>
Anda sedang membaca artikel tentang Cara Memasang Menu Accordion di Blog dan anda bisa menemukan artikel Cara Memasang Menu Accordion di Blog ini dengan url http://resistance-blog137.blogspot.com/2013/09/cara-memasang-menu-accordion-di-blog.html.. Anda boleh menyebarluaskan atau mengcopy artikel Cara Memasang Menu Accordion di Blog ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.
No comments:
Post a Comment
Untuk menyisipkan video, gunakan tag URL YOUTUBE ANDA...
Untuk menyisipkan gambar, gunakan tag URL GAMBAR ANDA...
Untuk menyisipkan kode, gunakan tag KODE ANDA...
Untuk menyisipkan kode panjang, gunakan tag KODE ANDA...
Untuk menyisipkan catatan, gunakan tag CATATAN ANDA...
Untuk menciptakan efek tebal gunakan tag TEKS ANDA...
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"
By :Admin The Resistance Blog.