Membuat Spoiler

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler
Anda sudah sering lihat Spoiler di kaskus atau forum-forum untuk nyembunyikan gambar, link dan konten lainnya. Spoiler ada dua yaitu untuk forum misalnya kaskus dan satunya lagi untuk dipergunakan di blog/web. Keduanya memiliki kode yang berbeda.

Tipe 1 Spoiler memakai bingkai
Contoh :

Judul

isi spoiler

Dengan kode html:

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</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>

NB:
 -Tulisan yang berwarna merah silahkan ganti dengan judul spoiler anda, sedangkan yang warna kuning ganti dengan isi spoiler anda.
- Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload macam photobucket, tinypic, dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload.
- Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video.

Tipe 2 Spoiler Memakai Bingkai Berwarna
Contoh:

Isi Spoiler.

Dengan Kode HTML:

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Again'; }" name="button" type="button" value="Show" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">Isi Spoiler.</p>
</div><div id="hide"></div></div></div>

NB:
-Tulisan yang berwarna merah silahkan ganti dengan judul spoiler anda, sedangkan yang warna kuning ganti dengan isi spoiler anda, sedangkan yang warna hijau ganti dengan kode warna.
- - Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload macam photobucket, tinypic, dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload.
- Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video.

Tipe 3 Spoiler tanpa bingkai
Contoh:

isi spoiler

Dengan kode html:

<div id="spoiler">
<div><div id="spoiler">
<div>
<div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;">
</div>
<div id="spoiler">
<div>
<input value="Show" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" 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 = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show'; }" type="button">
<div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:white;">
<span>isi spoiler
</span></div>
</div>
</div>
</div>
</div>

NB:
-Tulisan yang berwarna merah silahkan ganti dengan judul spoiler anda, sedangkan yang warna kuning ganti dengan isi spoiler anda, dan yang berwarna hijau ganti dengan warna tulisannya.
- - Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload macam photobucket, tinypic, dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload.
- Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video.