Fungsi dari spoiler ini adalah untuk
menampilkan (show) atau menyembunyikan (hide) image maupun text pada
halaman posting atau bisa juga di letakkan pada sidebar. Untuk menghemat
tempat biasanya para blogger menyiasati dengan menggunakan spoiler
tersebut. Bagi
sobat yang ingin membuat spoiler dan belum tahu caranya bisa ikuti cara
ini:
Di bawah ini adalah kode yang bisa sobat gunakan untuk membuat spoiler:
<div
id="spoiler"><div><input style="margin: 10px; padding: 0px;
height:60px; font-size: 50px; font-weight:bold;" value="OPEN"
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'; }"
type="button"/><div id="show" style="border: 5px; solid red;
margin 5px; padding: 2px; display: none; width: 90%;">
Sobat bisa memasukkan text atau alamat
gambar di sini.
<br>
<img
src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png"a>
</div><div
id="hide"></div></div></div>
Ganti yang berwarna merah dengan text atau alamat gambar sobat.
Di bawah ini adalah hasil dari kode-kode di atas.
Silahkan diklik untuk melihat hasilnya.