Aug 8, 2009

Cara Membuat Spoiler

Tutorial ini disediakan oleh :
Eriyza | http://eriyza.via.my/

Kali ini penulis ingin berkongsi dengan anda cara untuk membuat teks show hide dengan menggunakan arahan buka dan tutup. Cara ini agak mudah kerana anda cuma perlu menampal kodnya ke dalam topik dan boleh digunakan terus. Untuk tutorial ini penulis menggunakan bahasa ringkas agar mudah difahami.


Ianya bertujuan untuk menyembunyikan apa saja yang anda mahu sama ada isi kandungan topik, gambar, video atau audio. Ianya pasti membuatkan anda kelihatan kreatif di mata pelawat anda.

Cara²nya seperti berikut :-

Masukkan kod di bawah ke dalam tab Edit HTML semasa memulakan topik baru.

<div><div style="margin-bottom:2px;"><i><b><small>Tutorial ini disediakan oleh : </small></b></i><input value="Buka" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
<div style="border: 2px outset ; margin: 0px; padding: 6px;"><div style="display: none;">Eriyza | http://eriyza.via.my</div></div>

Cara untuk mengisi maklumat di dalam kod ialah :-

Tutorial ini disediakan oleh : = Tajuk spoiler
Eriyza | http://eriyza.via.my = Isi spoiler


Anda boleh menukar tulisan berwarna merah dengan ayat yang bersesuaian manakala tulisan berwarna hijau pula adalah kotak yang terdapat di luar tulisan. Untuk pilihan border lain, anda boleh rujuk di sini. Jika tidak mahu penggunaan border, tukarkan sahaja nilai 2px kepada 0px.

Contoh spoiler tanpa penggunaan border.

Tutorial ini disediakan oleh :

Okey, selamat membuat spoiler anda sendiri. Semoga berjaya.

Via : Ezany

2 Comment

Anarm Sun Aug 09, 03:23:00 AM

mekasih.. mekasih..

Eriyza Sun Aug 09, 10:20:00 AM

Anarm : Sesama.

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.