Jan 25, 2009

Menu Buka Tutup Di Sidebar


Budak bernama Firdaus telah meminta penulis agar mengajar cara untuk membuat menu buka tutup atau lebih dikenali sebagai hide show. Untuk itu, penulis akan memberi tutorial yang lengkap agar mudah difahami. Bersedialah untuk membaca entri yang agak panjang.


Sila Download Full Template sebelum memulakan sebarang pengubahsuaian pada blog. Berikut adalah cara² untuk membuatnya.

1. Login ke Blogspot.

2. Layout - Edit HTML.

3.
Download Full Template sebelum mengedit blog.

4.
Cari kod </head>, tambahkan kod ini di atasnya.

<style type="text/css">
.texthidden {display:inline}
.shown {display:block}
</style>


<script type="text/javascript">
document.write('<style>.texthidden {display:none} </style>');
</script>


<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="shown") {
whichpost.className="texthidden";
}
else {
whichpost.className="shown";
}
}
</script>

5. Kemudian, cari pula kod h2 {

Contoh :-

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

6. Tambahkan kod baru di bawah tanda }

h4 {
background: #ffdddd;
color: #666666;
margin-left: -1px;
margin-right: -1px;
margin-top: 0px;
margin-bottom: 1px;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
border: 2px solid #996666;
font-size: 11px;
}

7. Save template.

Sekarang, kita perlu memasukkan kod ke Sidebar pula.

1. Page Element - Add A Gadget - HTML / Javascript.

2. Masukkan pula kod² di bawah ini.

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> <h4>[+/-] Web Blog</h4></a></ul>

<ul class="texthidden" id="keyword">

<li><a href="http://link.com">Link 1</a></li>

<li><a href="http://link.com">Link 2</a></li>

<li><a href="http://link.com">Link 3</a></li>

<li><a href="http://link.com">Link 4</a></li>

<li><a href="http://link.com">Link 5</a></li>

</ul>

Penting!!! Anda mesti meletakkan katakunci yang sama pada onclick="expandcollapse ('keyword') dan <ul class="texthidden" id="keyword">

Penulis akan memberikan contoh agar anda lebih faham.

<ul><a href="javascript:void(0);" onclick="expandcollapse('Sources')"> <h4>Sumber Rujukan</h4></a></ul>

<ul id="Sources" class="texthidden">

<li><a href="http://muncet.blogspot.com/" target="_blank">Ien</a></li>

<li><a href="http://makeuseof.com/" target="_blank">Make Use Of</a></li>

<li><a href="http://sembangkomputer.com/" target="_blank">Sembang Komputer</a></li>

</ul>

3. Save.

Siap. Anda perlu teliti sewaktu memasukkan kod untuk mengelakkan widget bermasalah. Selamat mencuba. Semoga berjaya.

Update 20 Februari 2009

Sekiranya anda ingin menambah ikon seperti sebelum perkataan Sumber Rujukan, anda perlu memasukkan kod gambar selepas
<h4>.

<ul><a href="javascript:void(0);" onclick="expandcollapse('Sources')"> <h4><img src="http://www.gambar.com/icon.png">[+/-] Sumber Rujukan</h4></a></ul>
Via : Muncet

21 Comment

qunia Sun Jan 25, 03:32:00 PM

saya pun sebenarnye nak mintak eryza ajarkan tutorial ni juga.. terima kasih byk2.

@LiYaNNuaR Sun Jan 25, 04:57:00 PM

thanks for sharing... nak cuba gak...

Eriyza Sun Jan 25, 06:24:00 PM

Qunia : Owhhh! Lenkali rekues jer. :)

AliyaAnnuar : Selamat mencuba. :D

daus Sun Jan 25, 07:36:00 PM

thanks sebab sudi kongsi ilmu !!

Eriyza Sun Jan 25, 09:43:00 PM

Daus : Sama². :)

Cioara Andrei Sun Jan 25, 09:56:00 PM

Foarte interesant ce ai postat.M-am uitat pe blogul tau si imi place ce am vazut chiar e frumos si interesant.Felicitari si sigur am sa mai revin!

@LiYaNNuaR Sun Jan 25, 10:44:00 PM

bjaya juga akhirnya... thanks Eriyza... sya take note, ok... ;))

Eriyza Sun Jan 25, 10:57:00 PM

AliyaAnnuar : Baguslah sbb bejaya. :)

zell Sat Feb 07, 02:38:00 PM

Salam, miss tolong tengok2 kan blog saya tu, ntah pa2 ah miss, saya nak cuba ltak page muka surat dia x bagi, da bnyk kalik cuba tapi x berjaya jugak, sdih saya, mcm2 alasan yg blogspot bagi, herm..... :( n jugak yg nk wat "MENU" mcm kat dalam pages miss ni, hermmm.. suma pun yg saya nk try wat COMFIRM x dapat !! ni blog kedua sya da tau, blog 1st sy delete gara2 x dapat ikot tutorial yg miss bagi, herm... tolong erk?? thnxxx... :)

Eriyza Sat Feb 07, 09:56:00 PM

Zell : Anda menggunakan template yg dirip dari Wordpress sbb tuh ada sesetgh kod yg tak seswai tuk digunakan. Cuba gunakan template blogspot yg asli dan cuba lagi. :)

ZelL ThE gReaT ! Sun Feb 08, 03:20:00 PM

Oooo... mcm tu ker?? thnx erk, sorry sya ni newbie, ehe.. pa pon thnx sgt2 :)

Eriyza Sun Feb 08, 06:05:00 PM

Zell : Jgn putus asa. Cuba lg ye. :)

Anonymous

hai...nak tanye...sy dah wat mcm disuruh and berjaya wat...n dapat satu kotak berwarna pink...boleh tak sy tukar warna ke warna lain...

Eriyza Sun Apr 12, 10:44:00 AM

Anonymous : Boleh. Tukarkan kod warna di background: #ffdddd; pada step ke6.

Mr ProPiTo Wed Jan 20, 12:43:00 AM

semat la..hehehe...

Eriyza Wed Jan 20, 10:56:00 AM

Mr ProPiTo : Mekaseh.

padin Thu Nov 25, 04:51:00 PM

saya dah cuba masukkan gambar untuk ikon pada menu,tapi masalahnya gambar tu tak selari pulak dengan tulisan, camne nak ejas tu ye?

Eriyza Thu Nov 25, 07:37:00 PM

@padin
Pastikan ikon tersebut tidak terlalu besar supaya tulisan tidak tenggelam.

padin Fri Nov 26, 08:49:00 PM

@Eriyza tu la masalahnya, da buat kecik dah icon tu, 15px X 20px, tapi yang jadinya, gambar bahagian atas, tulisan di bawah.. bukan di tepi, huu

syamsul Wed Jan 05, 09:15:00 PM

eriyzam sy dah try tuto ny..
tp x bole lah..
bla nk save template je,
ada la error yg kuar..
npa ek..
arap bole tlg..

Eriyza Wed Jan 05, 11:18:00 PM

@syamsul
Cuba saudara buat dlm blog testing dulu.

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.