Tutorial : Create spoilers in Blogger and WordPress (Updated)

code-icon

[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 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 here to show 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>

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

Related Posts Plugin for WordPress, Blogger...

54 Comments

  1. hi fiona..
    thanks di atas komen awak kat blog khai tu.. mmg powerfull lah.. uhhu… tq tq..

    pasal wp-spoiler ni, khai lebih suka biasa je.. bila orang click read more dan dia baca sampai abis dalam page baru tu, so akan terus nampak comment form.. so diorang berkemungkinan akan rajin komen… daripada baca semua artikel tapi x nampak tempat nak komen… :D

    Reply
  2. @Khai
    nie bukan plugin “Read More here” tu…nie plugin utk tulis spoiler dlm text, contoh bila nak review movie tp nak hide part yg jadi spoiler

    @ tk2
    Wordpress uses the plugin wp-Spoilers. The javascript one is for Blogger.com as I already mentioned

    Reply
  3. alamak!! setelah diulang baca beberapa kali, now dah paham!! hihi..
    ala, kira ada juga yang pasang plugin ni untuk read more kan? tekan je terus entri keluar sampai abis…

    Reply
  4. hey, i stumbled upon ur post while searching for spoiler tags for blogspot. unfortunately, i cannot seem to get it right.

    about the first code, am i suppose to put it above ? cause my skin i wrote it myself so it doesnt have a thing.

    can help me?

    thanks alot

    Reply
  5. hello!
    thx for this guide, but after hours of trying, i can’t get it work. i’m almost as far, as considering changing from blogger to wordpress… please can you help me?

    greetz from germany

    Reply
  6. hi..
    Sorry to say this, but, it is common courtesy to include your source (with link where you get this javascript) for your tutorial, because I believe you get from somewhere else. Anyhow, it was a good effort though.

    Reply
  7. @Yemek
    You’re welcome

    @ Max
    what kind of problems are you having?

    @ izma
    I actually forgot the source where i got this tutorial because it was 2-3 different websites but I googled it and just put one source.

    Reply
  8. @Soletuti

    Hello there :) Thanks for visiting my blog. Could it be that your naruto site is using the old blogger template? There are two types of blogger template, one is the old one and one is the new XML one.

    This one is used in the XML one

    Reply
  9. Blogger has two types of templates. the old one and the new XML one which has the ]]> and stuff like b:skin

    the tutorial i wrote above does not work for the old template.

    Reply
  10. Im receiving this error when saving my template… what should i do? thanks for your help…

    “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

    Reply
  11. Got this error message. It is all greek to me, anyone who can tell me what to do?

    We were unable to save your template
    Please correct the error below and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

    Reply
  12. Hi, I’m having the same problem as a couple of other posters. When I tried to insert the code into blogger, I got this message:

    “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.”

    What should I do?

    Reply
  13. Blogger has two types of templates. the old one which is HTML based and the new XML one which has the ]]> and stuff like b:skin

    the tutorial i wrote above does not work for the old template. please check which blogger template you are using.

    Try copying the code and pasting it into notepad before pasting it into your blogger template. This is so that you dont accidently copy any symbols or formatting

    Reply
  14. I’m also having the same problem as other users, getting this message in Blogger when I try to make the changes:
    “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.”

    I checked the template and it is the new XML type so am really not sure what’s going on. Any help would be great :)

    Reply
  15. heys, i’m using the new template for blogger but it doesn’t seem to work, no idea why. Followed your steps exactly but still don’t get it why it’s not working.

    ‘SPOILER_NAME’)”>expand

    that’s all it shows on my blog and i can’t click on it either.

    Reply
  16. Thank you for this. I’m enough of a programmer to have modified the script to hide the “expand” link, but never having used JavaScript or CSS before, I would not have been able to write it from scratch myself.

    Reply
  17. hi, can you explain abit more on how to use to code after saving the templates. as in where to add the things you want to write, or which part must be change in order to use the code and stuff like that? thank you very much

    Reply
    • Hi there :)

      After you edit the code in the template, you have to add the 2nd part in your post and write the text you want to be hidden before the /DIV part.

      I’ve edited the 2nd part of my post to show where to put the text

      Reply

Leave a Comment.