Membuat Spoiler di Blog

Bagi para kaskuser pansi sudah familiar dengan istilah spoiler. Namun jika di blog caranya berbeda
Cara ini cukup menarik karena bisa membuat kejutan . Caranya yaitu pada saat akan membuat postingan pilih ke HTML mode. lalu kopas kode berikut.



<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler teks</b></i>: <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler
</div></div></div>



Contonhya sebagai berikut

Contoh spoiler teks:

Isi Spoiler

Jika anda ingin menggunakan spoiler gambar tinggal sisipkan saja kode dibawah ini

<div style="text-align: center;">
<img src="http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/395967_309185245791924_100001013525572_916493_942282867_n.jpg" />
</div>


dan akan menjadi

<div style="margin-top: 10px;">

<div class="smallfont" style="margin-bottom: 2px;">

<i><b>Contoh spoiler gambar</b></i>: <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">

<div style="display: none;">

<div style="text-align: center;">

<img src="http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/395967_309185245791924_100001013525572_916493_942282867_n.jpg" />

</div>

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

 Maka akan menjadi gini gan :

Contoh spoiler gambar:

Terima kasih dan selamat membaca .
Sumber ojelhtc.blogspot.com

10.55