how to make spoiler on blogspot

This is tutorial how to make spoiler in blogger. What is spoiler?
Spoiler usually use inside forum to hide some text or image. The text or image will be shown if the spoiler button is clicked.

This is the sample of spoiler button inside blog.

Spoiler sample :

How to make spoiler button

How to make spoiler:
Copy this script and paste it into your new post editor.

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">Your Title : <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><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;background: #f1f1f1 none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(127, 69, 0); line-height: 1.5em;"><div style="display:none;">Your Text or Image Link<br /></div></div></div>

Copy below script to insert image into spoiler

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">Your Title : <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="margin: 0px; padding: 6px; border: 1px inset; background-color: rgb(255, 255, 255); background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%; -moz-background-size: auto auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(125, 125, 125); line-height: 1.5em;"><div style="display: none;">
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_U_eh5KawwBY/TBhK9DjAYHI/AAAAAAAAAOk/v1CdregQo-I/s320/BLOGGER.gif"><img style="margin: 0pt 20px 20px 0pt; cursor: pointer; width: 128px; height: 128px;" src="http://3.bp.blogspot.com/_U_eh5KawwBY/TBhK9DjAYHI/AAAAAAAAAOk/v1CdregQo-I/s320/BLOGGER.gif" alt="spoiler" title="spoilers" border="0" /></a>

</div></div></div>

Image Spoiler :

http://www.freebloggertemplate.org/2010/06/new-window-blog-template.html

Enjoy the blog spoiler