Cara membuat spoiler pada Blogspot

Spoiler adalah salah satu cara untuk menyembunyikan tulisan, video, gambar atau yang lainnya pada suatu artikel atau postingan.  Tujuan sebenarnya pada penggunaan spoiler adalah untuk menghemat tempat pada postingan dan juga untuk mempercepat loading.

Cara membuat Spoiler

1. Spoiler untuk text.

Gunakanlah kode berikut :



<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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'BUKA'; }" name="button" type="button" value="CLICK DI SINI" /></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% #eeeeee; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">SISIPKAN KALIMAT YANG AKAN DISEMBUNYIKAN DI SINI</p>
</div><div id="hide"></div></div>

Kode merah : digunakan untuk mengubah warna huruf dan background.

Kode biru : sisipkan dengan kata, kalimat, atau link yang akan kita sembunyikan.

Contoh:



SISIPKAN KALIMAT YANG AKAN DISEMBUNYIKAN DI SINI


Spoiler untuk gambar
Gunakan kode berikut:


<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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'BUKA'; }" name="button" type="button" value="CLICK DI SINI" /></div>


<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3dZm-P-dd6Q49EkBD2wvyW8vtdgMLQXr2I5lfxvi9Kl-ajTiUkTJshgCU2M9sgZZ-3D4Mga5QAfvI7l-JtQggmzE2pEHhXgoJKBBY2_8NfsghNKVKMRsIZj6CxUFQp9Z0WoRpUzXr8Go/s1600/precise-pangolin.png" alt="UBUNTU" width="300" height="280" />


</div><div id="hide"></div></div>



Kode merah : digunakan untuk mengubah ukuran gambar

Kode biru : alamat gambar yang kita sisipkan.




Contoh: