Trik Membuat Spoiler di Blog

Apabila kita sering/ pernah berkunjung ke web forum, pastilah kita sering menjumpai spoiler, atau bahkan mungkin kita juga pernah menggunakannya. Saya akan mencoba memberikan trik cara mambuat spoiler di Blog. Membuat spoiler di blog tidak semudah membuat spoiler di forum-forum. 

Jika di forum forum kita cukup mengetik[spoiler]isi spoiler[/spoiler], kalau di blog lebih rumit, karena kita masih harus mengetikkan beberapa script untuk membuat spoiler. 

Oke, berikut langkah-langkah dalam membuatspoiler di blog:

1. Masuk ke postingan yang akan kita beri spoiler, atau buat entri baru

2. Masuk ke mode HTML

3. Copy script di bawah ini:

<div id="spoiler">
<div><input type="button" value="Buka" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }">
</div>
<div style="background: #00ffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">

isi spoiler

</div>

Keterangan:

Tulisan berwarna merah bisa anda ganti engan kata-kata yang anda inginkan

Kode berwarna hijau adalah kode warna untuk background. 

Jika ingin background transparan, anda bisa mengganti kode tersebut dengan tulisan transparent.

Tulisan yang berwarna hitam bisa anda ganti dengan konten tulisan, gambar ataupun video clip yang ingin diberi spoiler

4. Simpan dan lihat hasilnya

Berikut anda bisa lihat Videonya.