Blogging,  Photolog,  Technology,  Wordpress

Tutorial : Create spoilers in Blogger and WordPress (Updated)

[7 Jan 09] Update : change the code because there was some typo error caused by the formatting of my blog. Hopefully this fixes the problem

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 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.[spoiler]For example like this.[/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 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>

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

Your HTML coding should now look like this. Example:

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:

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!

Credit: Catagories


Leave a Reply

Your email address will not be published.