Cara membuat spoiler pada Blog

Udah tau yang namanya spoiler kan ??? spoiler memang kata yang tidak cukup asing lagi , selalu ada pada sebuah forum seperti kaskus dan indowebster .. Nah disini kita akan membahas bagaimana cara membuat spoiler ...
Ok langsung saja
Untuk yang belum tau spoiler

Judul

isi spoiler

Nah spoiler itu seperti itu . Mungkin ada yang bingung untuk apa spoiler  ??
Q : Untuk apa buat spoiler ?
A : Biasanya spoiler di buat untuk meletakkan gambar atau pun video ke dalamnya
Q : Kan bisa langsung di letakkan di depan tanpa spoiler ?
A : Jika di letakkan pada spoiler itu akan lebih mudah karena membuat loading page lebih cepat
Nah itu adalah beberapa saran untuk menggunakan spoiler
OK langsung saja menuju caranya :
<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>
Ket :
-copy code code tersebut pada saat post di sisi kanan tempat membuat post ada tulisan Compose di sebelah tulisan Compose ada edit HTML nah pilih itu lalu masukkan kode di atas .
-untuk isi dan judul ganti saja tulisan yang berwarna biru sesuai keinginan
-Jika ingin meletakkan gambar : - Upload dulu gambar di web seperti photobucket , imageshack dll
                                                - Pastikan gambar sudah di resize menjadi kecil paling tidak ukuran 400x300
                                                - lalu masukkan yang bertuliskan HTML code dan paste di isi spoiler
contoh untuk spoiler gambar :
Misal gambar dari Kaito Kid :
<a href="http://s1110.photobucket.com/albums/h442/stevenwilly/?action=view&amp;current=K640_kaitokid5.jpg" target="_blank"><img src="http://i1110.photobucket.com/albums/h442/stevenwilly/K640_kaitokid5.jpg" border="0" alt="Photobucket"></a>
Maka kode yang lengkap untuk spoilernya adalah :
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Kaito Kid</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;"><a href="http://s1110.photobucket.com/albums/h442/stevenwilly/?action=view&amp;current=K640_kaitokid5.jpg" target="_blank"><img src="http://i1110.photobucket.com/albums/h442/stevenwilly/K640_kaitokid5.jpg" border="0" alt="Photobucket"></a>
</div></div></div></div>
Dan Hasilnya adalah seperti ini

Kaito Kid

Nah selesai

SELAMAT MENCOBA :)