Membuat Spoiler Blog Seperti Kaskus

Nge-Blog memang menyenangkan, tapi ada kalanya kita malas ketika harus mengupload banyak file gambar pada postingan kita yang berakibat scroll kebawah terlalu panjang. Terpikir oleh saya tentang bagaimana membuat spoiler untuk gambar seperti di kaskus misalnya. Tentu akan menghemat tempat dan akan mempercantik tampilan blog. Nah, jika kalian ingin membuat spoiler seperti di kaskus berikut scriptnya.

<div style="margin: 20px 0px 20px 0px;">
<div class="smallfont" style="margin-bottom: 2px;">
<span style="color: #999999;"><b>Spoiler</b> for <i>Judul Spoiler:</i></span>
<input 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 = 'Close'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display =
'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px;
width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<center>
<img src="###" />
</center>
</div>
</div>
</div>

Caranya adalah copy script di atas ke dalam postingan, kemudian ubah tulisan berwarna biru dengan judul spoiler kalian dan tuisan merah dengan link gambar kalian.
Bagaimana mudah bukan ?. Sekian dulu tutorial kali ini semoga dapat membantu.

Tweet