Cara Memasang spoiler gambar

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari posting, dengan tujuan untuk menghemat space halaman posting. Biasanya yang disembunyikan dalam spoiler adalah berupa gambar.

Cara memasang spoiler

1. Buat postingan baru add new post, dan pilih mode HTML (seperti ditunjukkan pada gambar)
2. Masukkan kode berikut ini

<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 dunk" /></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;">

Teks yang akan disembunyikan di spoiler, semoga tips ini membantu

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

hasilnya akan seperti ini :

Teks yang akan disembunyikan di spoiler, semoga tips ini membantu

Jika ingin menyisipkan gambar ke dalam spoiler, kita hanya perlu memasukkan kode ini, dan meletakkannya di bagian berwarna merah pada kode di atas

<img src="http://alamat_gambar.jpg" alt="gambarA" width="300" height="400" />

jika ingin mengubah tulisan spoiler == tulisan  “buka dunk”, bisa mengedit pada bagian coding berwarna biru

Artikel Terkait Nufray: