How to make spoiler in blogger | CompieQu

Wednesday, February 17, 2010

How to make spoiler in blogger

If you are good in writing, or you can make a long article but you want to safe some spaces in your page, probably spoiler is the answer. This tutorial will show you how to make spoiler in blogger (blogspot).


Copy and paste the code below

<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: #f5f5f5 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>


Your Title :

Your Text or Image Link


If you want to insert a picture, make sure to change the float to center

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://img246.imageshack.us/img246/1215/photodofollowcopy.gif"><img style="float:center; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 128px; height: 128px;" src="http://img246.imageshack.us/img246/1215/photodofollowcopy.gif" border="0" alt="dofollow" title="dofollow" /></a>



Dofollow :

dofollow



16 Comments:

Thank You :) This is a good script.

Thank you very much : it works perfectly :)

thank you very much
It works great on my manga-translate blog

IS there a way to make the button just into a plain link?

This was great but..the button value-show should change to hide after the click event..how to make this

thanks very much for the codes
this is the solution.

Non-English comments will be deleted