Langkah-langkah dalam membuat spoiler di postingan blog (baik berbasis blogger/blogspot maupun wordpress) sangat mudah. Tapi sebelumnya perlu di ketahui ketahui setidaknya ada dua model spoiler.
Model 1
example
Model 2
Cara membuatnya:
Untuk model 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 kuning sesuai kebutuhan.
- Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload macam photobucket, 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 yang cantik,imoet,manis. Misalnya diupload dengan photobuket dan kode HTML-nya seperti ini:
<a href="photobucket.com" target="_blank"><img src="http://i466.photobucket.com/albums/rr28/utamasatya/My%20Family/intan.jpg" border="0" alt="Image and video hosting by Photobucket"></a>
Maka, code selengkapnya di spoiler:
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Cantik</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="photobucket.com" target="_blank"><img src="http://i466.photobucket.com/albums/rr28/utamasatya/My%20Family/intan.jpg border="0" alt="Image and video hosting by Image and video hosting by Photobucket"></a>
</div></div></div></div>
Dan, hasilnya seperti ini:
Cantik
Imoetz
Maniez
Ket: Apabila gambar kebesaran, sebelum diupload kecilkan sizenya. Usahakan lebarnya tak lebih dari 10 cm.
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:
- Apabila spoiler berisi gambar, ganti 'isi spoiler' dengan URL gambar yang sudah diupload.
- Apabila 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>
demikianlan langkah langkah bagaimana membuat spoiler pada blog kita ....
Selamat mencoba ....
