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.[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 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
53 Comments
Khai
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
I guess this doesn’t work in WordPress because WP editor will remove the Javascript tag.
IcedNyior
@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
Sorry..:p
I skipped the 1st paragraph and went straight to the code.
Khai
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
Hehe! Skrang i dah tak pasang plugin tu, sbb skrang i jarang pakai tag MORE tu, kecuali kalo ada post yg panjang.
Pingback:
grateful
Thanks a lot, great work, really appreciated.
blowfly
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
@grateful
Im glad it helped you
@blowfly
I’ve sent you an email :)
Yemek Tarifleri
Thanks for this. Article who your writen was so important for me. Thanks again :)
Max
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
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
@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
seems like it is not working in blogspot… just try it..
IcedNyior
yes it is working in blogspot. Check my test blog here
http://thisizmyplayground.blogspot.com/2008/05/testing-blogger-spoilers.html
Soletuti
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
@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
Thanks! Yup, that’s it! =/
Anyway, nice tutorial. I’ll be visiting later when I change that ‘ol template, hahaha.
Taki
my blogskin can’t work with this
it doesn’t have the ]]> thingy .
how do i make it work ?
IcedNyior
@ Taki
are u using the old blog template? this only works for the new blog template
Taki
i am doing the “Edit HTML ” one
IcedNyior
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
helo. do u have the code for the classic template?
sulae
Thx for ur inpo.. ^-^
IcedNyior
@ nurul
sorry I dont hv the code for the old template. sorry
@sulae
no prob :D
mj
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
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
Graet post mate. Keep them coming….
Ivarelle
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
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
I think:
Should’ve been:
I don’t know…
KongregateHack
script type=”text/Javascript”
script type=’text/Javascript’
Bianca S
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 :)
IcedNyior
it doesn’t work in the comment box
daryl
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
Because some errors were made when you copy pasted the codes. Please copy the code in the box
Nathaniel
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
I’m glad you found it helpful :D
tingyu
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
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
hi!
thank you very much! i got it. =)
yazurii
thank you, this tutorial helped me alot!! XD
Federico Russo "Taotor"
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
Hey…. Thanks dude, it’s very cool……
It makes my post shorter…..
compiequ
nice post :D
.-= compiequ´s last blog ..Acer Aspire 4530 Review =-.
sunni
i’m sorry, it doesn’t work in my blog…
kecik
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?? =-.
IcedNyior
Sorry I’m a bit busy at the moment. will check it mayb next week
HURULAINI
walla…thanks…this is what i’m looking for…hehehehe
.-= HURULAINI´s last blog ..[Fancam] Junsu at ZUNO showcase, Beijing =-.
seety
erm.. kalu nk wat da image leh x?
Si Apis
Thanks! Using this for my post. Working on WP 3.0
sanjhar
this was helpful thanks