Cara Membuat Spoiler

Senin, 12 Maret 2012

Spoiler banyak digunakan untuk menyembunyikan gambar yang beresolusi tinggi sehingga dapat mempercepat loading halaman web atau blog. Untuk membuatnya adalah dengan meletakkan script dibawah ini didalam postingan.

Script spoiler adalah sbb :

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

<b>Nama Spoiler</b>: <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="Open" /></div>

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

<div style="display: none;">

Alamat URL Gambar atau tulisan yang akan ditambahkan

</div>

</div>

</div>

Contoh :

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

<b>Nama Spoiler</b>: <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="Buka" /></div>

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

<div style="display: none;">

<a href="http://www.klub-abg.com" title="Blog Tutorial">

<img border="0" src="http://2.bp.blogspot.com/_bL0lqaUaUYg/SejKrLU_ydI/AAAAAAAAAT0/T-RQtAOc_YQ/s320/blogbanner.JPG" /></a>

Bannerku

</div>

</div>

</div>

Akan Tampak seperti dibawah ini :

Nama Spoiler: