Membuat Spoiler di Blog

Membuat Spoiler di Blog yaitu cara menghemat space halaman posting dan juga berguna untuk untuk menyembunyikan sebagian atau seluruh postingan. Spoiler bisa digunakan untuk menyembunyikan teks, gambar, kode html atau apa pun.

Bagi pengguna kaskus, tentunya berbeda kode antara kaskus dan web/blog. Langsung caranya aja...Pastikan ketika Anda menulis postingan, dalam mode HTML, copy 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
</div></div></div>

Ini contoh hasilnya

Contoh spoiler teks:

Isi Spoiler

Apila 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/AVvXsEhqwyae8dwTeGQSpzw4GYqccxLeT5zQ6waB7XPHmTh6V5TJSr04V1fF5b5Cae8hI1eZsNfAAjO44NZ4e6WmJxclAF9ov0nipbfyI1TYvA00hORjaSHQbLlS4gd34X02jZ7olsRqdsSR06g/s1600/aspire3.jpg" />
</div>

Maka kode spoiler diatas 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/AVvXsEhqwyae8dwTeGQSpzw4GYqccxLeT5zQ6waB7XPHmTh6V5TJSr04V1fF5b5Cae8hI1eZsNfAAjO44NZ4e6WmJxclAF9ov0nipbfyI1TYvA00hORjaSHQbLlS4gd34X02jZ7olsRqdsSR06g/s1600/aspire3.jpg" />
</div>
</div></div></div>

Maka hasilnya seperti ini :

Contoh spoiler gambar:

Selamat mencoba...

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250