Cara Membuat Kotak Spoiler yang Bisa di Buka Tutup di Blog

Selamat pagi teman-teman hari ini Intan mau membagikan tutorial cara membuat kotak spoiler yang biasanya kita sering lihat di forum-forum. Kotak spoiler itu gunanya menyembunyikan gambar atau tulisan yang ingin kita tidak perlihatkan ke orang-orang tertentu atau mungkin hanya untuk menghemat halaman saja supaya tidak terlalu panjang. Kabar baiknya untuk kita semua, bukan hanya forum saja yang bisa menerapkan kotak spoiler, tapi kita sebagai blogger juga bisa memasang kotak spoiler di postingan blog. Intan sudah mencobanya di blog intan satunya. Hasilnya seperti ini:

Contoh penggunaan kotak spoiler di postingan blog sudah aku gunakan sebelumnya di blog review film. Untuk lihat demonya berkunjung saja ke Review Korean drama Gangnam Blues. Mengapa pakai spoiler? karena banyak orang yang tidak suka membaca ending film atau inti film sebelum mereka menonton sendiri film itu, jadi mereview sesuatu khususnya film jika kita akan menyebutkan cuilan-cuilan adegan kotak spoiler ini sangat diperlukan. Selain untuk menyembunyikan tulisan, kita juga bisa menyembunyikan gambar dalam spoiler. Banyak gunanya khan? Okay langsung saja deh kita mulai..

1. Masuk atau Log in ke Blogger.com

2. Lalu klik simbol pensil untuk menulis postingan baru

4. Masukkan kode berikut ini ke kotak Html postingan:

<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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">Ganti dengan tulisan, gambar atau kode script<img border="0" /></div></div></div>

5. Contoh Kotak spoiler dengan gambar:

Judul Spoiler: