Membuat Spoiler Dalam Postingan Blogger Dan WordPress

Sederhana dan jarang digunakan, namun akan sangat penting dan berguna sekali saat kita ingin menggunakannya. Karena itu kali ini saya sempatkan untuk mengabadikannya dalam postingan blog ini. Dua macam spoiler yang mungkin paling sering kita temukan, yakni spoiler dengan dan tanpa Border.

Cara membuat spoiler dengan menggunakan border.

<div><div style="margin: 5px;"><div style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Contoh (judul)</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div><div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Isi spoiler, bisa diisi dengan text, embed video atau pun kode script</div></div></div></div>

Contoh 

Cara membuat spoiler dengan menggunakan border pada postingan Blogger dan wordPress.

 

Cara membuat spoiler tanpa menggunakan border.

<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" 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 = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="button" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">Isi spoiler, bisa diisi dengan text, embed video atau pun kode script</span></div></div></div></div></div>

*ket: Masukkan kode dari mode HTML post, kedua kode di atas dapat digunakan dalam postingan blogger ataupun wordpress. 

Semoga bermanfaat dan tetap semangat . . . ,

:-)