Cara Membuat Spoiler 2

Posted by Tips Trick Blogger Friday, February 25, 2011 0 comments

Posting ini merupakan lanjutan Cara Membuat Spoiler yang sudah ane posting sebelumnya. Cara kedua membuat spoiler hanya akan menampilkan buttonnya saja, tampa tampilan kolom tertutup. Di bawah ini ada beberapa scrip yang bisa nada gunakan.

Spoiler 1

<div id="spoiler"><div>
<input name="button" onclick="if (this.parentNode.parentNode
.getElementsByTagName('div')['show'].style.display != '')
{ this.parentNode.parentNode.getElementsByTagName('div')
['show'].style.display = ''; this.parentNode.parentNode
.getElementsByTagName('div')['hide'].style.display = 'none';
this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode
.parentNode.getElementsByTagName('div')['show'].style.display =
'none'; this.parentNode.parentNode.getElementsByTagName('div')
['hide'].style.display = ''; this.innerText = ''; this.value =
'LIHAT LAGI'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="contoh spoiler polos" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="text-align: justify;">
silahkan masukkan tulisan anda di sini</div>
</div>
<div id="hide">
</div>
</div>

Silahkan ganti contoh spoiler polos dengan judul anda

Masukkan gambar dengan kode seperti ini

Contohnya seperti di bawah ini....

Spoiler 2

<div id="spoiler"><div>
<input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="contoh spoiler dengan border" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="background: none repeat scroll 0% 0% rgb(235, 243, 251); border: 1px solid rgb(170, 204, 238); color: black; margin: 0px; padding: 7px;">
<div style="text-align: justify;">
silahkan masukkan tulisan anda di sini</div>
</div>
<div id="hide">
</div>
</div>
</div>

Silahkan ganti contoh spoiler dengan border dengan judul anda
Contohnya sperti di bawah ini

Spoiler 3

Silahkan ganti CONTOH SPOILER UNTUK GAMBAR dengan judul anda
Silahkan ganti alamat gambar dengan tulisan merah paling bawah dengan alamat gambar anda
Contohnya seperti di bawah ini