Cara mudah membuat Spoiler di wordpress
Sering kan kita mengunjungi website kaskus? Disitu sering kita temukan posting forum yang saat ingin membacanya atau ingin melihat isinya anda perlu klik tombol dan keluar tulisan atau gambarnya. Dan akan disembunyikan lagi saat anda klik tombol sembunyikan. Nah itulah yang disebut spoiler. Pada wordpress, hal ini juga bias di buat. Caranya sangat mudah. Anda hanya cukup menyisipkan beberapa kode saja. Berikut adalah Cara mudah membuat Spioler di posting wordpress:
- Buat posting baru pada wordpress anda
- Pilih mode HTML
- masukkan kode berikut di dalam postingan yang ingin di kasih spoiler.
<div id=”spoiler”>
<div><input style=”font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;” onclick=”if (this.parentNode.parentNode.getElementsByTagName(‘div’)[‘show’].style.display != ”) { this.parentNode.parentNode.getElementsByTagName(‘div’)[‘show’].style.display = ”; this.parentNode.parentNode.getElementsByTagName(‘div’)[‘hide’].style.display = ‘none’; this.innerText = ”; this.value = ‘Close’; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[‘show’].style.display = ‘none’; this.parentNode.parentNode.getElementsByTagName(‘div’)[‘hide’].style.display = ”; this.innerText = ”; this.value = ‘open’; }” name=”button” type=”button” value=”Tampilkan” /></div>
<div id=”show” style=”border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;”>
<div style=”color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;”>
<p style=”text-align: justify;”>
Tulis text atau gambar yang ingin disembunyikan disini</div>
</div>
</div>
- Simpan dan silahkan coba akses.
Contoh: