CARA MEMBUAT SPOILER PADA POSTINGAN BLOG

Sebenarnya tentang bagaimana cara membuat spoiler ini, sudah banyak diposting oleh teman-teman blogger yang lain. Tetapi tidak ada salahnyalah apabila saya melengkapi conten label tutorial di blog ini, juga menyajikan tentang cara membuat spoiler. Sebab ibarat warung, kalau suatu barang akan dibeli lalu tidak tersedia, biasanya konsumen pindah ke warung lain. Siapa tahu ada pelanggan yang diam-diam setia mengikuti update blog petir fenomenal ini (sok PD...hehehe..).

Sebelumnya bagi yang belum tahu apa itu spoiler, secara singkat saya jelaskan dulu. Spoiler adalah tombol yang diguanakan untuk menghemat tempat atau menyembunyikan konten (bisa teks, HTML, foto atau video) dengan buka tutup. Tulisan pada tombol perintah biasanya menggunakan kata "BUKA". Begitu dibuka, duwwaaaaarrr......kaget dech ! Heheh...Contohnya dapat Anda lihat pada akhir posting di bawah ini.

Spoiler bisa juga digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu content yang dimaksud. Untuk melihatnya dengan mengklik tombol buka spoiler itu. 

Bagaimana cara membuat spoiler itu, mari kita ikuti langkah-langkahnya sebagai berikut.

1. Login dulu ke Blogger Anda
2. Pilih New Post atau Entri Baru seperti akan membuat postingan biasa
3. Pilihlah pada mode HTML saat membuat postingan, jangan Compose
4. Gunakan kode script berikut ini untuk membuat spoiler:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau kode script, gambar atau video di sini
 <br>
</div>
</div>
</div>

      5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup
      6. Klik publikasikan, selesai

Lihat Contoh Spoiler :

Contoh :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau kode script, gambar atau video, di sini. Kalau teks-nya puanjang, kaget juga biasanya Gan !
<br>
</div>
</div>
</div>

Demikian saja, semoga bermanfaat bagi teman-teman yang membutuhkan.