Wednesday, March 30, 2011

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.




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:

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

    Lease Templates

    ReplyDelete
  2. nice spoiler code
    very nice share...

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

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

    ReplyDelete
  5. bakal berguna di website aq neh.. tq gan

    ReplyDelete
  6. 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

    ReplyDelete

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

Handphone Protector

handphone is the stuff that is always attached in your pocket. This m obile is a common item , but that does not mean it is not w...