Membuat Spoiler di Blog

Spoiler adalah salah satu cara/teknik untuk menyembunyikan seluruh atau sebagian isi dari posting. Entah itu gambar, kuotasi atau teks biasa dengan tujuan untuk menghemat space halaman posting, supaya tidak terlalu panjang ke bawah. Bagaimana jika ingin membuat spoiler pada blog anda?

Berikut langkah-langkah untuk membuatnya :

1. Pada menu Post > Add New pilih mode HTML

2. Masukkan SCRIPT berikut :

<div id="spoiler">
<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
Teks yang disembunyikan/yang berada di dalam spoiler
</div>
</div>
</div>

3. Selesai, tampilannya akan seperti ini :
 

Teks yang disembunyikan/yang berada di dalam spoiler

Jika image/gambar yang ingin dispoiler, ganti tulisan bercetak merah di atas dengan kode lokasi image/gambar berada. Biasanya struktur dari image/gambar yang sudah terupload :

<img src="http://lokasi-gambar-berada.jpg" height="ukuran tinggi" width="ukuran lebar gambar" alt="penjelasan gambar" />

NB : Jika ingin background transparan, tinggal ganti <div style="background: #ffffff; menjadi <div style="background: #transparant;