Hosted by GOOGLE
Don't forget Subscribe us

468x60

Wednesday, March 30, 2011

8
how to make spoiler on blogspot

Help us to share

If you like this

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.




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>





Enjoy the blog spoiler


8 comments:

maddy said...

I really was amazed to check out the stuff here! Thanks!

Lease Templates

Tutorials Tips said...

nice spoiler code
very nice share...

iPhone apps said...

yeah.. I really need to use spoiler on my blogspot blog...

cameras Gadget said...

wow, complex code

doral properties said...

I really was amazed to check out the stuff here! Thanks!

Sajakrerindu said...

Mantap gan tutorialnya ^^

Harvest Moon said...

bakal berguna di website aq neh.. tq gan

Sam Jhon said...

how to make spoiler on blogspot...amazing post, I think that's are helpful for blogging post.


http://www.computervalleyusa.com/tv-media/audio-electronics/boomboxes

Post a Comment

While comments maybe u would like to download another Blogger Templates Or Tricks ?? :)

Popular Posts