Tutorial Cara Buat Button Show-Hide Spoiler

 

Hasil selepas di klik...

Hai all...Semalam koz dah ajar "Cara Buat Button Untuk Blog",jadi hari ini koz akan ajar benda yang sama tapi hasilnya lain.Button Spoiler ini fungsinya adalah untuk menyimpan isi sesuatu post,JavaScript atau gambar caranya lebih kurang seperti Hide/Show Shoutbox yang koz ada buat tutorial sebelum ini.

Sebagai contoh seperti berikut:-

Pengunaan spoiler untuk widget di JavaScript

Mari Cuba Mana Tahu Dapat Tingkatkan Pengunjung Di Blog Korang^^

Penggunaan Spoiler untuk Text/posting
Hai all...Semalam koz dah ajar "Cara Buat Button Untuk Blog",jadi hari ini koz akan ajar benda yang sama tapi hasilnya lain.

Button Spoiler ini fungsinya adalah untuk menyimpan isi sesuatu post,JavaScript atau gambar caranya lebih kurang seperti Hide/Show Shoutbox yang koz ada buat tutorial sebelum ini.blablablabla....

Penggunaan Spoiler untuk gambar

Cuba teka..gambar apakah ini??

Sudah paham?jadi berikut adalah langkah-langkahnya...

Langkah 1

Copy dan paste code di bawah pada JavaScrip/Posting

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Pamirkan" 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 = 'Pamirkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

Masukkan Code JavaScript/Gambar/Text Di sini

</div></div></div></div>

Langkah 2

Pada code berwarna merah korang boleh ubah ayat "Pamirkan" kepada ayat yang korang nak(fungsi sebelum spoiler di buka)
Pada code berwarna hijau korang boleh ubah ayat "Tutup" kepada ayat yang korang nak(fungsi selepas spoiler di buka)
Pada code berwarna biru korang letak code JavaScript,gambar atau text yang korang nak.

Save dan Lihat hasilnya...

Camat mencuba...

Ranking: 5