Cara Membuat Spoiler di Postingan Blog

Anda yang biasa nongkrong di forum mungkin sudah tak asing lagi dengan spoiler. Spoiler adalah teknik menyembunyikan gambar, teks, video dll. untuk menghemat space. Spoiler ternyata bisa juga diterapkan dalam postingan blog sebagaimana yang nanti saya bagikan kali ini.

Ada dua model spoiler:
1.

Judul

isi spoiler

2.

isi spoiler

Untuk kode pertama:

<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 tercetak merah sesuai kebutuhan
• Jika spoiler berisi gambar, upload dulu dengan blogspot atau pengupload semacam photobucket, tinypic dll. Kemudian ganti 'isi spoiler' dengan kode HTML gambar yang telah diupload
• Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video

Contoh: Jika ingin membuat spoiler berisi foto Mbak Aura kasih dan misalnya diupload dengan tinypic sedangkan kode HTML-nya seperti ini:

<a href="http://tinypic.com" target="_blank"><img src="http://i42.tinypic.com/eb1ngp.jpg" border="0" alt="Image and video hosting by TinyPic"></a>
Maka, kode spoiler sebagai berikut:

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Aura Kasih</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://tinypic.com" target="_blank"><img src="http://i42.tinypic.com/eb1ngp.jpg" border="0" alt="Image and video hosting by TinyPic"></a>
</div></div></div></div>

Hasilnya seperti ini:

Aura Kasih

Ket: Jika gambar terlalu besar, size-nya terlebih dahulu dikecilkan dengan photoshop maupun software-software yang lain. Usahakan lebarnya tak lebih dari 10 cm.

Kemudian untuk cara kedua tekniknya agak berbeda:

<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, maka 'isi spoiler' diganti dengan URL gambar yang telah diupload
• Jika spoiler berisi video, ganti 'isi spoiler' dengan embed code video

Nah, jika untuk blog berbasis wordpress caranya gini:

<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 disembunyikan
</div>
</div>

Selamat mencoba dan semoga berhasil.