Membuat Spoiler

Spoiler berguna untuk menyembunyikan sebagian atau seluruh postingan dan untuk menghemat space halaman posting. Spoiler bisa digunakan untuk menyembunyikan teks, gambar, kode html atau apa pun.

Berikut kode spoiler saya :

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler teks</b></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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')
[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px;
width: 55px;" type="button" value="Show" />
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler
</div></div></div>

Contoh hasilnya :

Contoh spoiler teks:

Isi Spoiler

Apabila ingin menggunakan gambar, maka ganti teks dengan kode gambar.

Contoh kode gambar :

<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrGfpcE4r1_t4EmWX492s_CdmSk1RlvxUHVFwr7PKkBsVzxd9tE1_AGVY4M3xj4QQ-3A-xqH2T1QHSxtkQ96YRPQQhcwp1rHDq1PWEMSjATxPzuntHjonGOKuvdhpme5HLXebLu-zxAM/s1600/aspire3.jpg" />
</div>

Maka kode spoiler di atas menjadi :

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler gambar</b></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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')
[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; 
padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrGfpcE4r1_t4EmWX492s_CdmSk1RlvxUHVFwr7PKkBsVzxd9tE1_AGVY4M3xj4QQ-3A-xqH2T1QHSxtkQ96YRPQQhcwp1rHDq1PWEMSjATxPzuntHjonGOKuvdhpme5HLXebLu-zxAM/s1600/aspire3.jpg" />
</div>
</div></div></div>

Contoh hasilnya :  

Contoh spoiler gambar: