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
Khai Says:
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
Posted on March 11th, 2008 at 11:17 pm
tk2 Says:
I guess this doesn’t work in WordPress because WP editor will remove the Javascript tag.
Posted on March 12th, 2008 at 3:18 am
IcedNyior Says:
@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
Posted on March 12th, 2008 at 4:26 am
tk2 Says:
Sorry..:p
I skipped the 1st paragraph and went straight to the code.
Posted on March 12th, 2008 at 5:44 am
Khai Says:
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…
Posted on March 19th, 2008 at 6:09 am
IcedNyior Says:
Hehe! Skrang i dah tak pasang plugin tu, sbb skrang i jarang pakai tag MORE tu, kecuali kalo ada post yg panjang.
Posted on March 19th, 2008 at 6:12 am
The Zestful IcedNyior - Tech Tuesday: Malaysian Version of Twitter Says:
[...] guys! Tuesday again, time for another tutorial. Was my last tutorial about spoilers helpful? I hope so. Sorry couldn’t upload this post earlier, my internet was down because my [...]
Posted on March 19th, 2008 at 7:49 am
grateful Says:
Thanks a lot, great work, really appreciated.
Posted on March 26th, 2008 at 2:59 am
blowfly Says:
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
Posted on June 22nd, 2008 at 8:25 pm
IcedNyior Says:
@grateful
Im glad it helped you
@blowfly
I’ve sent you an email :)
Posted on June 22nd, 2008 at 11:25 pm
Yemek Tarifleri Says:
Thanks for this. Article who your writen was so important for me. Thanks again :)
Posted on July 2nd, 2008 at 6:23 am
Max Says:
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
Posted on July 4th, 2008 at 6:25 am
izma Says:
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.
Posted on August 1st, 2008 at 4:26 pm
IcedNyior Says:
@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.
Posted on August 1st, 2008 at 4:38 pm
TJ Says:
seems like it is not working in blogspot… just try it..
Posted on August 13th, 2008 at 2:03 am
IcedNyior Says:
yes it is working in blogspot. Check my test blog here
http://thisizmyplayground.blogspot.com/2008/05/testing-blogger-spoilers.html
Posted on August 13th, 2008 at 7:23 am
Soletuti Says:
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!
Posted on August 23rd, 2008 at 11:17 am
IcedNyior Says:
@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
Posted on August 26th, 2008 at 9:59 pm
Soletuti Says:
Thanks! Yup, that’s it! =/
Anyway, nice tutorial. I’ll be visiting later when I change that ‘ol template, hahaha.
Posted on August 27th, 2008 at 8:44 am
Taki Says:
my blogskin can’t work with this
it doesn’t have the ]]> thingy .
how do i make it work ?
Posted on October 3rd, 2008 at 5:16 am
IcedNyior Says:
@ Taki
are u using the old blog template? this only works for the new blog template
Posted on October 3rd, 2008 at 5:19 am
Taki Says:
i am doing the “Edit HTML ” one
Posted on October 3rd, 2008 at 5:21 am
IcedNyior Says:
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.
Posted on October 3rd, 2008 at 5:24 am
nurul Says:
helo. do u have the code for the classic template?
Posted on October 4th, 2008 at 11:55 pm
sulae Says:
Thx for ur inpo.. ^-^
Posted on October 5th, 2008 at 2:06 am
IcedNyior Says:
@ nurul
sorry I dont hv the code for the old template. sorry
@sulae
no prob :D
Posted on October 6th, 2008 at 8:28 am
mj Says:
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”.
Posted on October 12th, 2008 at 10:48 am
Beverheim Says:
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”.
Posted on October 27th, 2008 at 7:59 pm
Natalie Says:
Graet post mate. Keep them coming….
Posted on October 31st, 2008 at 11:04 pm
Ivarelle Says:
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?
Posted on November 23rd, 2008 at 2:13 am
IcedNyior Says:
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
Posted on November 23rd, 2008 at 2:47 am
KongregateHack Says:
I think:
Should’ve been:
I don’t know…
Posted on November 25th, 2008 at 3:31 am
KongregateHack Says:
script type=”text/Javascript”
script type=’text/Javascript’
Posted on November 25th, 2008 at 3:32 am
Bianca S Says:
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 :)
Posted on January 3rd, 2009 at 2:08 am
test Says:
[spoiler]string 1[spoiler] string 2[/spoiler] string 3[/spoiler]
Posted on January 22nd, 2009 at 8:11 pm
IcedNyior Says:
it doesn’t work in the comment box
Posted on January 23rd, 2009 at 9:31 am
daryl Says:
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.
Posted on March 12th, 2009 at 5:48 pm
IcedNyior Says:
Because some errors were made when you copy pasted the codes. Please copy the code in the box
Posted on March 12th, 2009 at 6:22 pm
Nathaniel Says:
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.
Posted on March 17th, 2009 at 12:51 am
IcedNyior Says:
I’m glad you found it helpful :D
Posted on March 17th, 2009 at 9:53 am
tingyu Says:
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
Posted on April 20th, 2009 at 4:32 am
IcedNyior Says:
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
Posted on April 20th, 2009 at 11:26 am
tingyu Says:
hi!
thank you very much! i got it. =)
Posted on April 22nd, 2009 at 6:42 am
yazurii Says:
thank you, this tutorial helped me alot!! XD
Posted on May 19th, 2009 at 11:09 am
Federico Russo "Taotor" Says:
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
Posted on October 27th, 2009 at 6:02 pm
blindcozy Says:
Hey…. Thanks dude, it’s very cool……
It makes my post shorter…..
Posted on December 19th, 2009 at 4:38 am
compiequ Says:
nice post :D
.-= compiequ´s last blog ..Acer Aspire 4530 Review =-.
Posted on February 17th, 2010 at 5:37 am
sunni Says:
i’m sorry, it doesn’t work in my blog…
Posted on March 5th, 2010 at 12:08 am
kecik Says:
i can’t work it in my blog..
i already follow the instruction..4 times!!
hehe..help2..
is it because of my template?
.-= kecik´s last blog ..apa kekuatanku?? =-.
Posted on March 21st, 2010 at 3:29 pm
IcedNyior Says:
Sorry I’m a bit busy at the moment. will check it mayb next week
Posted on March 22nd, 2010 at 3:40 pm
HURULAINI Says:
walla…thanks…this is what i’m looking for…hehehehe
.-= HURULAINI´s last blog ..[Fancam] Junsu at ZUNO showcase, Beijing =-.
Posted on March 30th, 2010 at 8:56 am
seety Says:
erm.. kalu nk wat da image leh x?
Posted on June 10th, 2010 at 12:34 am
Si Apis Says:
Thanks! Using this for my post. Working on WP 3.0
Posted on June 30th, 2010 at 4:52 pm
sanjhar Says:
this was helpful thanks
Posted on December 14th, 2011 at 11:32 pm