Membuat Spoiler di Blog

Seperti kita ketahui Spoiler adalah suatu cara untuk menyembunyikan suatu teks/gambar/video pada sebuah postingan, baik itu pada suatu forum/blog/wordpress.

Spoiler bermanfaat untuk menghemat waktu pada saat membuka blog dan untuk menghemat tempat pada sebuah postingan.
Disini ada 2 model spoiler yang bisa sobat gunakan pada postingan sobat.
Contoh model 1 :

Judul 

isi spoiler

Cara membuat spoiler model 1 :
<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 :
- Ganti kata yang berwarna merah dengan kata yang sobat mau.
- Jika spoiler berisi gambar, silahkan sobat upload dulu dengan pengupload seperti 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.

Contoh: kita mau buat spoiler berisi foto anda yang Tampan. Misalnya diupload dengan Photobucket dan kode HTML-nya seperti ini:
<a href="http://s1117.photobucket.com/albums/k589/484817/?action=view&amp;current=indonesiap128a-500rupiah-1992-donat.jpg" target="_blank"><img src="http://i1117.photobucket.com/albums/k589/484817/indonesiap128a-500rupiah-1992-donat.jpg" border="0" alt="Photobucket"></a>

Maka, kode di spoilernya seperti ini :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Photo Orang Tampan</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://s1117.photobucket.com/albums/k589/484817/?action=view&amp;current=indonesiap128a-500rupiah-1992-donat.jpg" target="_blank"><img src="http://i1117.photobucket.com/albums/k589/484817/indonesiap128a-500rupiah-1992-donat.jpg" border="0" alt="Photobucket"></a>
</div></div></div></div>

Dan hasilnya seperti ini :

Photo Orang Tampan

Dan jika sobat memasukan gambar, usahakan ukurannya tidak lebih dari 10 cm.
Jika ingin dikecilkan silahkan edit dahulu dengan Photoshop, tetapi jika ingin dibesarkan silahkan datang saja ke Mak Erot. Wkwkwkwk.....

Bagaimana???
Sobat sudah mengerti bukan? Ok. Kita lanjut ke model 2.
Contoh model 2 :
<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 Spoiler!" 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 Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
isi spoiler
</span></div></div></div></div></div>

Ket:
- Jika spoiler berisi gambar, ganti 'isi spoiler' dengan URL gambar yang sudah diupload.
- Jika spoiler berisi video, ganti 'isi spoiler' dengan embed code video.

Sudah mengertikah...???

Naaah kalo untuk Wordpress, kodenya seperti ini :

<div>
<input type="button" value="Tampilkan" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>
<div style="background: #CCCCCC; margin: 10px auto;
border: 1px solid #000;
padding: 5px;">
<div style="display: none;">
teks/HTML gambar/embed video yang ingin disembunyikan
</div>
</div>


Jika sudah mengerti, silahkan langsung coba biar sobat paham.
Saya dapatkan informasi ini dari kang Wawanwae