agus' site: 02/06/11

Cara Membuat Spoiler pada Postingan Blog (Blogger/Wordpress)

Kita sering lihat di forum-forum seperti www.kaskus.us , mereka menggunakan spoiler untuk menyembunyikan gambar/teks/video dll untuk menghemat space. Spoiler ternyata bisa juga diterapkan di blog. Cara membuat spoiler di postingan blog (baik berbasis blogger/blogspot maupun wordpress) sangat mudah. Tapi sebelum share caranya, yang saya ketahui baru ada dua model spoiler. Langsung chek it out :

Contoh

Cara membuatnya:

Untuk 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 tercetak hijau sesuai kebutuhan.
- 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.

Contoh: kita mau bikin spoiler berisi foto. Misalnya diupload dengan photobucket dan kode HTML-nya seperti ini:
<a href="http://s789.photobucket.com/albums/yy174/agus_tomy/?action=view&current=agustomy-1.jpg" target="_blank"><img src="http://i789.photobucket.com/albums/yy174/agus_tomy/agustomy-1.jpg" border="0" alt="Photobucket"></a>

Maka, kode selengkapnya di spoiler:

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Islamic Banking</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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://s789.photobucket.com/albums/yy174/agus_tomy/?action=view&current=agustomy-1.jpg" target="_blank"><img src="http://i789.photobucket.com/albums/yy174/agus_tomy/agustomy-1.jpg" border="0" alt="Photobucket"></a>
</div></div></div></div>

Dan, hasilnya seperti ini:

agustomy

Ket: Jika gambar terlalu besar, sebelum diupload kecilkan dulu size-nya dengan photoshop. Usahakan lebarnya tak lebih dari 10 cm.
___________

Sedangkan untuk model 2, 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, ganti 'isi spoiler' dengan URL gambar yang sudah diupload.
- jika spoiler berisi video, ganti 'isi spoiler' dengan embed code video.

Nah, kalau untuk blog berbasis wordpress caranya kayak 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.

Sampai jumpa lagi