Membuat Spoiler pada Posting

Spoiler, Yaitu teknik menyembunyikan gambar/teks/video dll untuk menghemat space. Spoiler ternyata bisa juga diterapkan di blog. Adapun Tampilan Spoiler umumnya seperti dibawah ini

Contoh 1

isi spoiler

Adapun Kode Script yang bisa digunakan untuk membuat Spoiler seperti diatas adalah :

<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>



Penting :

1. Ganti kata yang tercetak merah sesuai dengan tampilan yang sahabat blogger inginkan.
2. Jika spoiler berisi gambar, sahabat blogger upload dulu dengan blogspot atau pengupload macam photobucket, tinypic, dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload.
3. Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video

Contoh: kita mau bikin spoiler berisi foto Sexy. upload terlebih dahulu gambar sahabat blogger dengan Photobucket atau situs penyimpan foto online lainnya  dan kode HTML-nya seperti ini:

<a href="http://s1081.photobucket.com/albums/j350/bungiwan/?action=view&amp;current=hotgif.gif" target="_blank"><img src="http://i1081.photobucket.com/albums/j350/bungiwan/hotgif.gif" border="0" alt="Photobucket"></a>

Maka, kode selengkapnya yang di isikan agar gambat sahabat blogger dapat di tampilkan melalu spoiler adalah :


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Cewek Hot</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://s1081.photobucket.com/albums/j350/bungiwan/?action=view&amp;current=hotgif.gif" target="_blank"><img src="http://i1081.photobucket.com/albums/j350/bungiwan/hotgif.gif" border="0" alt="Photobucket"></a>

</div></div></div></div>


Maka Hasilnya akan tampak Seperti ini

Cewek Hot

Gimana?... Gampangkan membuatnya Sahabat Blogger?...
Ok Selamat Mencoba dan Berkreasi ya, Semoga Sukses..