Membuat Spoiler

Pernahkah anda memposting artikel yang memuat banyak gambar? Artikel anda pasti akan menjadi sangat memakan tempat. Artikel yang banyak mengandung gambar akan sedikit lambat jika dibuka. Untuk memper pendek penggunaan tempat, maka anda dapat menggunakan Spoiler.


Selain untuk menyembuyikan gambar, spoiler juga dapat bermanfaat untuk menyembunyikan tapilan text seperti pada contoh berikut ini:

Judul Spoiler:

Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf, dll

Pada dasarnya kode spoiler seperti contoh diatas adalah sebagai berikut:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <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="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf, dll

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

Untuk membuat spoiler, salin kode diatas dan letakkan pada postingan anda. Ganti judul spoiler dengan merubah text berwarna merah, anda juga dapat merubah text pada tombol dengan mengganti text berwarna oranye dan ungu. Isi bagian text yang berwarna kuning dengan text/image yang akan anda masukkan dalam spoiler. Selain yang saya sebutkan diatas, kode tersebut dapat anda modifikasi sesuai keinginan dan kebutuhan anda.