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 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
Popularity: 41% [?]
48 Responses to "Tutorial : Create spoilers in Blogger and Wordpress (Updated)" {+}
Copyright © Viva-licious 2009. All Rights Reserved.
A quality product from 
Khai on March 11, 2008
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
tk2 on March 12, 2008
I guess this doesn’t work in Wordpress because WP editor will remove the Javascript tag.
IcedNyior on March 12, 2008
@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
tk2 on March 12, 2008
Sorry..:p
I skipped the 1st paragraph and went straight to the code.
Khai on March 19, 2008
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…
IcedNyior on March 19, 2008
Hehe! Skrang i dah tak pasang plugin tu, sbb skrang i jarang pakai tag MORE tu, kecuali kalo ada post yg panjang.
grateful on March 26, 2008
Thanks a lot, great work, really appreciated.
blowfly on June 22, 2008
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
IcedNyior on June 22, 2008
@grateful
Im glad it helped you
@blowfly
I’ve sent you an email :)
Yemek Tarifleri on July 2, 2008
Thanks for this. Article who your writen was so important for me. Thanks again :)
Max on July 4, 2008
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
izma on August 1, 2008
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.
IcedNyior on August 1, 2008
@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.
TJ on August 13, 2008
seems like it is not working in blogspot… just try it..
IcedNyior on August 13, 2008
yes it is working in blogspot. Check my test blog here
http://thisizmyplayground.blogspot.com/2008/05/testing-blogger-spoilers.html
Soletuti on August 23, 2008
Hi! I used this code in this blog: http://soletuti-soletuti.blogspot.com and it worked fine, but then I tried it in this other blog: http://narutomanga-soletuti.blogspot.com and is not working… Could it be that is not compatible with some templates?
Thanks in advance!
IcedNyior on August 26, 2008
@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
Soletuti on August 27, 2008
Thanks! Yup, that’s it! =/
Anyway, nice tutorial. I’ll be visiting later when I change that ‘ol template, hahaha.
Taki on October 3, 2008
my blogskin can’t work with this
it doesn’t have the ]]> thingy .
how do i make it work ?
IcedNyior on October 3, 2008
@ Taki
are u using the old blog template? this only works for the new blog template
Taki on October 3, 2008
i am doing the “Edit HTML ” one
IcedNyior on October 3, 2008
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.
nurul on October 4, 2008
helo. do u have the code for the classic template?
sulae on October 5, 2008
Thx for ur inpo.. ^-^
IcedNyior on October 6, 2008
@ nurul
sorry I dont hv the code for the old template. sorry
@sulae
no prob :D
mj on October 12, 2008
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”.
Beverheim on October 27, 2008
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”.
Natalie on October 31, 2008
Graet post mate. Keep them coming….
Ivarelle on November 23, 2008
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?
IcedNyior on November 23, 2008
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
KongregateHack on November 25, 2008
I think:
Should’ve been:
I don’t know…
KongregateHack on November 25, 2008
script type=”text/Javascript”
script type=’text/Javascript’
Bianca S on January 3, 2009
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 :)
test on January 22, 2009
[spoiler]string 1[spoiler] string 2[/spoiler] string 3[/spoiler]
IcedNyior on January 23, 2009
it doesn’t work in the comment box
daryl on March 12, 2009
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.
IcedNyior on March 12, 2009
Because some errors were made when you copy pasted the codes. Please copy the code in the box
Nathaniel on March 17, 2009
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.
IcedNyior on March 17, 2009
I’m glad you found it helpful :D
tingyu on April 20, 2009
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
IcedNyior on April 20, 2009
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
tingyu on April 22, 2009
hi!
thank you very much! i got it. =)
yazurii on May 19, 2009
thank you, this tutorial helped me alot!! XD
Federico Russo "Taotor" on October 27, 2009
In the edit window it doesn’t seem to work, but the tag has been accepted, so I’m pretty sure it’ll work once the post is published. :D
Thank you very very much! :D
blindcozy on December 19, 2009
Hey…. Thanks dude, it’s very cool……
It makes my post shorter…..
compiequ on February 17, 2010
nice post :D
compiequ´s last blog ..Acer Aspire 4530 Review
sunni on March 5, 2010
i’m sorry, it doesn’t work in my blog…