Malemm sobat blogger semua. kali ini saya akan membagiakan rahasia membuat menu navigasi pada blog. Bisa di lihat di blog saya terdapat banayak menu navigasi nya.
Menu Accordion adalah berupa susunan menu yang di susun secara vertikal, tentulah berbeda sekali dengan menu horisontal ( baca : cara mempercepat loading 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>
Menu Accordion adalah berupa susunan menu yang di susun secara vertikal, tentulah berbeda sekali dengan menu horisontal ( baca : cara mempercepat loading 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}
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">
<div id="isi1">
<h3><a href="#isi1">
Judul 1</a></h3><div class="post"><div id="isi1">
<h3><a href="#isi1">
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"></div>
<div id="isi2">
<h3><a href="#isi2">
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"></div>
<div id="isi3">
<h3><a href="#isi3">
Masukkan item anda
disini,bisa berupa teks atau widget
</div>
</div>
</div>
</div>
</div>
terimakasih atas kunjungnnya hee. jangan lupa join and comment di tunggu
0 komentar:
Posting Komentar