Cara membuat spoiler di blog

Spoiler merupakan suatu widget atau aplikasi berbentuk tombol, yang bisa menyembunyikan sebagian ataupun seluruh dari isi konten kita. Spoiler selain memanfaatkan tempat dengan seminimal mungkin sehingga sedikit ruang yang terpakai, spoiler pun dapat mempengaruhi beratnya suatu blog, karena spoiler dapat menyembunyikan konten seperti gambar, ataupun aplikasi-aplikasi lainnya dengan sebuah tombol. Dan dapat terbuka apabila tombol tersebut diklik.



Gimana apakah tertarik dengan trik seperti ini, kurang lebih hasilnya akan seperti ini, coba sobat klik tombolnya!!

Tukeran Link yu!!

<br /> <a href="http://zoelf.blogspot.com" title="zoel's Blog" style="text-decoration:none;border:0;" target="_blank"><b><strong><blink>zoel's blog</blink></strong></b></a><br />



----banner----





<!-- Power banner --><br /> <a href="http://zoelf.blogspot.com"><img border="0" alt="tutorial blog" src="http://img63.imageshack.us/img63/8796/zoelfblog.gif" /></a><br /> <noscript><a href="”http://zoelf.blogspot.com”" software” title="”free" download><strong>free download software <br /> </strong></a></noscript><br /> <!-- end power banner --><br />
setelah sobat copas code ini di blog Sobat, beri komentar di Tab "tukeran link/banner atau di cbox"

Nah jika diklik tombolnya maka baru lah konten yang dituju akan keluar, seperti ini kodenya:

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tukeran link yu!! (hanya contoh) </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>

Cara membuat spoiler di blog

1. Login di blog sobat
2. Pilih layout
3. Edit elemen
4. add a gadget--HTML/javascript
5. copas code di atas, dengan mengedit terlebih dahulu kata yang di beri warna
6. save.