Cara Membuat Spoiler Berbagai Jenis Di Blog

Contoh Spoiler Pertama :

Spoiler
is slang for any element of any summary or description of any piece of
fiction that reveals any plot element which will give away the outcome
of a dramatic episode within the work of fiction, or the conclusion of
the entire work

Kode untuk membuatnya adalah seperti ini :

<div style="border: 0px inset green; padding: 
0px;"><div><button class="button" 
onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; 
this.parentNode.style.display = 'none';" title="Click to show the 
spoiler." type="button"><span style="color:black;"><span 
style="color: rgb(0, 102, 0); font-weight: bold;"><blink>J U D U L S P O I L E R</blink></span></span></button></div><div
id="spoiler" style="display: none;"><span style="font-weight: 
bold; color: rgb(0, 102, 0);">Letakkan Kode yang Ingin disembunyikan disini</span></div></div>

Contoh Spoiler ke 2

Spoiler
is slang for any element of any summary or description of any piece of
fiction that reveals any plot element which will give away the outcome
of a dramatic episode within the work of fiction, or the conclusion of
the entire work

Dan Kode untuk membuatnya adalah seperti berikut :

<div id="spoiler"><div><input 
style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 
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'; }" name="button" type="button" value="LIHAT"
/></div><div id="show" style="border: 1px solid white; 
display: none; margin: 5px; padding: 2px; width: 98%;"><p 
style="text-align: justify;">Letakkan Kode yang Dsembunyikan Disini</p></div><div id="hide"></div></div></div>

Contoh Spoiler ke 3 

Kode untuk membuatnya :

<div id="spoiler"><div><input 
style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 
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'; }" name="button" type="button" value="BUKA"
/></div><div id="show" style="border: 1px solid white; 
display: none; margin: 5px; padding: 2px; width: 98%;"><div 
style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; 
border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p 
style="text-align: justify;">LETAKKAN KODENYA DISINI</p></div><div id="hide"></div></div></div>

Contoh Spoiler ke 4 :

Kode untuk membuatnya :

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" 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 = 'Close';
} else { 
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">LETAKKAN KODENYA DISINI</div></div></div>

Contoh Spoiler ke 5 :

Judul

Kode untuk membuatnya :

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul</span></i><input
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'; }" 
style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" 
type="button" value="SPOILER 5" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
LETAKKAN KODE SOBAT DISINI</div>
</div>
</div>
</div>

Wah ternyata ada Berbagai Macam Tombol Spoiler di Blog, semoga semua Tombol spoiler ini bermanfaat.

ref : http://tanpa-isi.blogspot.com/