membuat menu spoiler / show,hide

berikut ini kami akan share cara membuat spoiler , tahukah sobat apa spoiler itu ?
spoiler adalah semacam button yg bertuliskan show dan kalo kita klik button yang bertuliskan show tadi maka
akan terlihatlah isi dari button itu , setelah itu button yg tadi bertuliskan show berganti menjadi tulisan hide dan
kalau kita klik butonya makan isi dari button tersebut tidak lagi diperlihatkan
cara nya :

1. Login dahulu ke akun blogger anda
2. klik ''page element'' klik add gadged lalu klik html/java script
3. selanjutnya copy paste kode yg ada di bawah ini ke gadged tersebut , lalu klik save dan atur posisi
    gadged yang sobat suka.

Berikut kode gadged nya :

<div
style="margin: 5px;"> <div style="margin-bottom: 2px;"
class="bigfont"><input style="margin: 0px; padding: 0px; width:
100%;" value="SHOW" 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 style="border: 1px inset ;
margin: 0px; padding: 6px; background: #FF0000; none repeat scroll 0%
0%; -moz-background-clip: border; -moz-background-origin: padding;
-moz-background-inline-policy: continuous;" class="alt2"><div
style="display: none;">
Isi dengan teks atau kode gambar dll disini</a>
</div></div></div>

contoh dari spoiler :

Isi dengan teks atau kode gambar dll disini