Jika dilihat fungsinya , spoiler ini berguna untuk membuka maupun menutup teks atau gambar yang disembunyikan. Kita tinggal pilih open atau close (hide), maka akan bergerak mengikuti perintah.
Spoiler ini biasa juga digunakan untuk menghemat halaman posting agar tidak terlalu memanjang ke bawah. Jika Anda berkeinginan memasang spoiler di blog, maka bisa juga membuatnya dengan cara menerapkan kode di bawah ini.
Spoiler ini biasa juga digunakan untuk menghemat halaman posting agar tidak terlalu memanjang ke bawah. Jika Anda berkeinginan memasang spoiler di blog, maka bisa juga membuatnya dengan cara menerapkan kode di bawah ini.
<div id="spoiler">Coba di sini<input style="margin: 10px; padding:0px; height:30px; font-size:15px; font weight:bolt;" 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"/>Coba di sini <div id="show"
style="border: 2px; solid:; margin:5px padding:2px; display: none; width:;">
(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"/>Coba di sini <div id="show"
style="border: 2px; solid:; margin:5px padding:2px; display: none; width:;">
Anda masukkan Tetx atau gambarnya di sini.
<img src="http://alamat gambar Anda">
</div>
<div id="hide">Contoh</div></div>
<div id="hide">Contoh</div></div>
Yang berwarna hijau merupakan keterangan, jika tidak ingin tampil bisa Anda kosongkan.
Contoh spoiler di atas jika dibuat maka hasilnya akan seperti di bawah;
Coba di siniCoba di sini
Contoh
0 komentar: