Spoiler di Blog

Anda yang biasa nongkrong di forum mungkin sudah tak asing lagi dengan spoiler. Yaitu teknik 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 menginjak ke tutorialnya, yang saya ketahui setidaknya ada dua model spoiler.
1.

contoh

isi spoiler

2.

isi spoiler

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 merah 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 Mbak Aura kasih yang cantik itu. Misalnya diupload dengan tinypic dan 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 selengkapnya di spoiler:
<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>

Dan, hasilnya seperti ini:

Aura Kasih

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

Wah, capek juga. Sebentar, saya tak minum dulu. Slruppp. Oke, mari kita lanjutkan.

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 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.  http://widiy.blogspot.com/

Sumber

Bagikan

Jangan lewatkan

Spoiler di Blog

4 / 5

Oleh Unknown

Unknown Kamis, Juli 14, 2011 Komentar