Membuat Spoiler

Spoiler apakah itu?

1.

Enjoy, Santai!

enjoy-santai.blogspot.com

2.

enjoy-santai.blogspot.com

Itu tuh yang namanya spoiler. Dan gw posting ini, biar ga lupa gimana cara ngebuat spoilernya




Untuk yang 1 ,

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler
</div></div></div></div>

Ket : Tinggal diganti tuh yang warna merah, sesuai kebutuhan!

Yang 2,

<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" 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 = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
isi spoiler
</span></div></div></div></div></div>


Ket : tinggal ganti yang warna merah!!

contoh: mau bikin spoiler mr bean pake yang 1 ! nih link



<a href="http://tinypic.com?ref=2hg5k47" target="_blank"><img src="http://i54.tinypic.com/2hg5k47.jpg" border="0" alt="Image and video hosting by TinyPic"></a>

Jadi:
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Mr Bean</span></i><input value="Show" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<a href="http://tinypic.com?ref=2hg5k47" target="_blank"><img src="http://i54.tinypic.com/2hg5k47.jpg" border="0" alt="Image and video hosting by TinyPic"></a>
</div></div></div></div>


Hasilnya:

Mr Bean

Sumber

-------
Catatan cara menampilkan kode script:
# Kode < diganti menjadi '&lt;'
# Kode " diganti menjadi '"'
# Kode > diganti menjadi '&gt;'
ket: tanpa '
atau masuk sini
--------