Cara Mudah Memasang Spoiler Gambar Pada Postingan blog

1. Buatlah postingan baru. Postingan lama juga bisa, tinggal diedit saja.
2. Tentukan objek yang akan ditayangkan/sembunyikan. Misalnya image atau gambar, bisa juga kutipan.
3. Jangan lupa, Anda harus ganti mode postingan ke HTML (biasanya terletak di pojok kanan atas kotak postingan). Nanti kalau sudah selesai memasang kode scriptnya, Anda bisa kembali ke mode VISUAL.
4. Kalau Anda sudah menentukan objeknya, copy-paste script berikut sebelum objek yang akan ditayangkan/sembunyikan.

<div><div style=”margin: 20px; margin-top:5px”><div style=”margin-bottom: 2px;”><input style=”margin: 0px; padding: 5px; width: auto; ” value=”Show” 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 = ‘Hidden’; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Show’; }” type=”button”/></div><div class=”alt2″><div style=”display: none;”><div style=”border: none; color:none; background-color:none; text-align: justify; padding:10px;”>

5. Tambahkan kode berikut di akhir atau setelah objeknya.

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

6. Perhatikan, keseluruhan kode script nantinya akan terlihat seperti ini.

<div><div style=”margin: 20px; margin-top:5px”><div style=”margin-bottom: 2px;”><input style=”margin: 0px; padding: 5px; width: auto; ” value=”Show” 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 = ‘Hidden’; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Show’; }” type=”button”/></div><div class=”alt2″><div style=”display: none;”><div style=”border: none; color:none; background-color:none; text-align: justify; padding:10px;”>

IMAGE ATAU KONTEN ANDA DI SINI

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

7. Jika sudah selesai memasang script, anda tinggal publish/terbitkan (atau update jika postingan lama).
8. Selesai dech. Dan, Anda bisa melihat hasilnya.