Cara Membuat Spoiler di Postingan Blog

Kali ini saya akan share tentang spoiler, kalo anak-anak forum sih pasti udah tahu tentang spoiler. Tapi saya akan menjelaskan sedikit tentang spoiler. Spoiler digunakan untuk menyembunyikan sebagian atau seluruh kata, gambar  di postingan blog anda, selain itu spoiler juga berguna untuk menghemat spasi halaman posting dan mempercepat loading postingan blog anda.

Nah, bagi yang belum tahu gambaran spoiler langsung aja dilihat contohnya : 

Inilah contoh dari spoiler :

text yang anda sembunyikan akan muncul setelah di klik

Berikut langkah-langkah membuat spoiler di postingan blog :
1. Login ke blogger
2. Buat postingan baru
3. Ubah mode Compose menjadi mode HTML
4. Masukkan kode dibawah ini :

<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 Anda

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

5. Klik publikasikan

Inilah hasil spoiler dari kode diatas

Contoh spoiler teks :

Isi Spoiler Anda

*Catatan
Ganti kode berwarna merah dengan judul spoiler teks yang anda inginkan
Ganti kode berwarna biru dengan isi dari teks/gambar yang ingin anda sembunyikan
Untuk menyembunyikan gambar, ganti tulisan "isi spoiler anda" dengan kode <center><img src="url gambar"></center>
contoh :

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh gambar yang dibuat</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;">
<center>
<img src="http://fremont.com/wp-content/uploads/2012/04/Scalable-gradient-favicon-F-1024x1024.jpg" /></center>
</div>
</div>
</div>