Spoiler????

Setelah menjelajahi internet dengan mbah google, akhirnya saya berkeinginan untuk mengulas sedikit tentang spoiler. Spoiler?? Kalau anak-anak yg biasa main di forum kayak kaskus dll, pasti sudah tau donk tentang spoiler. Spoiler merupakan suatu teknik dengan menggunakan script html yang berfungsi untuk menyembunyikan beberapa bagian dari isi/content suatu halaman web. Untuk membuka bagian yang tersembunyi tersebut, biasanya dengan meng-klik suatu tombol (biasanya diberi nama tombol "show"). Dengan menggunakan spoiler ini, tentu saja akan mengurangi waktu load konten suatu halaman web/blog sehingga waktu yang dibutuhkan untuk membuka halaman web menjadi lebih cepat.

Spoiler ini sebenarnya tidak digunakan hanya pada forum, tetapi bisa juga kita gunakan pada halaman website atau blog yang kita miliki. Hanya saja, biasanya kalau pada forum, penulisannya atau penggunaan spoiler ini sudah di permudah. Misalnya pada forum kaskus, penulisan spoiler nya hanya seperti berikut ini :

[spoiler=judul] tulisan/gambar/conten lainnya yg disembunyikan [/spoiler]

Untuk spoiler bertingkat pada kaskus :
[spoiler]
[spoiler]
tulisan/gambar/conten lainnya yg disembunyikan
[/spoiler]
[/spoiler]

hasil untuk spoiler bertingkat :

tulisan/gambar/conten lainnya yg disembunyikan

Lalu, bagaimana cara membuat spoiler pada postingan web atau blog anda??
Nah, untuk yang satu ini, kita perlu menambahkan script html untuk spoiler. Contoh spoiler yang menyembunyikan content :

Ini adalah hasil spoiler..
Disini juga bisa diisi dengan gambar/image..
Selamat mencoba.

Sintaks untuk spoiler di atas adalah sebagai berikut :

<div><div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Show" style="margin: 0px; padding: 0px; width: 60px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Ini adalah hasil spoiler..
Disini juga bisa diisi dengan gambar/image..
Selamat mencoba.
</div></div></div></div>

Gimana, ga susah kan?? kali ini, cukup sekian dulu ya penjelasannya. Selamat mencoba. Terimakasih..