Its been a while since I wrote a tutorial yea? Here’s something about spoiler tags and how to include them into your blog. This tutorial is for both Wordpress.org hosted blogs and free Blogger/Blogspot blogs.

Spoilers for WP

The Wordpress plugin that im currently using to hide my spoilers is wpSpoiler. This is especially useful when I want to write reviews on movies or books and I don’t want to reveal information that might spoil it for someone else.Click for Spoiler

How do you add this plugin to your website? Just download it from the site (click the link above), make changes in the PHP file to change the language and wallah! All you have to do is put your info between tags like this [ spoiler ] This is a hidden text [ /spoiler ] and you’re all set.

Ahh the wonders of Wordpress. Thats so easy, I hear you say. But what about people who are using Blogger to host their website? Next up…

Spoilers for Blogger - Part 1 :Editing the Theme

This is for you folks who host your blogs on blogger and have blogspot.com in your blog URL. It requires a little more work and is a bit more complicated so listen up.

First of all, go to your Dashboard >> Template >> Edit HTML

Then look for this line: ]]></b:skin> and </head> . There are two parts of codes.

First part, insert this code BEFORE ]]></b:skin>

.commenthidden {display:none;}
.commentshown {display:inline;}

Then add this code AFTER ]]></b:skin> and BEFORE </head>

<script type=”text/Javascript”>

function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className==”commentshown”) { whichpost.className=”commenthidden”; } else { whichpost.className=”commentshown”; }

} </script>

Your HTML coding should now look like this. Example:
add spoiler tags in Blogger

Save settings. Thats one part done. Phew!

Spoilers for Blogger - Part 2 : Creating spoilers in blog post

To add spoilers to your blog post, click Create A Post and click Edit Html (its on the top right next to ‘Compose’). Then add this bit of code:
<a aiotitle=”click to expand” href=”javascript:togglecomments(’SPOILER_NAME‘)”>Click me to read spoilers</a>

<div class=”commenthidden” id=”SPOILER_NAME“>put your hidden text here</div>

You can change SPOILER_NAME to anything you want but make sure that they are both EXACTLY the same. The <a aiotitle> and <div> dont have to be close to each other, as long as they are in the same post and have the exact same name. It will work.

Good luck and I hope this tutorial helps!