Cara Membuat Spoiler

Sering main ke forum-forum membuat kang salman penasaran bagaimana cara memanfaatkan spoiler agar bisa di terapkan di blog dengan begitu akan memberi benefit (keuntungan) yang banyak buat blog khusunya yang doyan masukin gambar video dan musik. lalu apa si yang di maksud dengan spoiler?

Spoiler adalah cara untukmenyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoilerjuga bermanfaat agar konten yang berat seperti gambar dalam ukuranbesar dan video tidak diload dulu sebelum menekan tombol show. Dengan katalain spoiler membantu kita mengurangi waktu load konten blog danmemberikan pilih kepada pembaca blog untuk membuka atau tidak isi

spoiler. 

Anda sudah sering lihat Spoiler di kaskus atau forum-forumuntuk nyembunyikan gambar, link dan konten lainnya.Spoiler ada duayaitu untuk forum misalnya kaskus dan satunya lagi untuk dipergunakandi blog/web seperti http://agoessnaruto.forumotions.com Keduanya memiliki kode yang berbeda.

• Spoiler Forum misalnya KASKUS:

[spoiler=judul spoiler]isi spoiler[/spoiler]

• Spoiler untuk blog/web:

Menyembunyikan konten tertentu dari sebuah halaman blog/websitediperlukan untuk menghemat space. Ketika visitor ingin melihatnyamereka dapat dengan mudah menampilkannya. Begitupun dalam softwareforum semacam vBulletin, Spoiler pasti banyak digunakan.

Berikut kode yang bisa digunakan dalam membuat spoiler di blog :

<div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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;">isi spoiler...</div></div></div></div>

Hapus "tentang Blo bla bla" dan ganti dengan judul yang anda inginkan misal lihat juga, klik,  dsb.
Isi spoiler hapus, gantikan dengan url dengan gambar, musik atau video yang anda inginkan.

Contoh java script di atas :

Tentang bla..bla.bla..

isi spoiler...