Welcome Guest ( Log In | Register )

Outline · [ Standard ] · Linear+

 Tutorial : Create spoilers in Blogger

views
     
Pmc
post Aug 13 2008, 05:42 PM

(╯°□°)╯︵ ┻━┻
******
Senior Member
1,182 posts

Joined: Oct 2007
From: Asgard


QUOTE(lil`pumpkinz @ Aug 13 2008, 03:27 PM)
Iced, I'm so rclxub.gif rclxub.gif
*
what's so confusing? i use this guide to make the spoiler in my blog, and it works fine
lil`pumpkinz
post Aug 13 2008, 11:08 PM

私はデビッド愛
*****
Senior Member
869 posts

Joined: Jan 2008



QUOTE(IcedNyior @ Aug 13 2008, 05:38 PM)
sorry that was coz I was testing a different template at the time and didnt put the code in
Why? Do it slowly and step by step. If you need more help, do pm me biggrin.gif
*
Thank you so much notworthy.gif Btw, I'm still trying on how to post a password-protected post sweat.gif
Iced, is there any way we can blog some unwanted visitor to our blog?


Added on August 13, 2008, 11:09 pm
QUOTE(Pmc @ Aug 13 2008, 05:42 PM)
what's so confusing? i use this guide to make the spoiler in my blog, and it works fine
*
Those code thingy sweat.gif sweat.gif

This post has been edited by lil`pumpkinz: Aug 13 2008, 11:09 PM
paco
post Aug 14 2008, 12:31 AM

Casual
***
Junior Member
339 posts

Joined: Jan 2003


Thanks for sharing the info.
eXPeri3nc3
post Aug 14 2008, 02:52 AM

It's coming! 3ɔu3ıɹǝdxǝ ♥
*******
Senior Member
9,257 posts

Joined: Aug 2005
From: Not so sure myself Status: 1+3+3=7



@IcedNyior -- Lol you can use DOM to change the words / image after clicking brows.gif
cracksys
post Aug 14 2008, 04:52 AM

I'm a Vault Dweller!!
*******
Senior Member
3,668 posts

Joined: Jun 2006
From: Bikini Abyss


QUOTE(IcedNyior @ Aug 13 2008, 07:20 AM)
shameless blog plugging I see tongue.gif
*

ah, seems like i visited your blog when the code is not working .. today, i see real spoiler

» Click to show Spoiler - click again to hide... «

TSIcedNyior
post Aug 14 2008, 06:15 AM

Regular
******
Senior Member
1,768 posts

Joined: Feb 2008


QUOTE(lil`pumpkinz @ Aug 13 2008, 11:08 PM)
Thank you so much notworthy.gif Btw, I'm still trying on how to post a password-protected post sweat.gif
Iced, is there any way we can blog some unwanted visitor to our blog?
*
i think the only way to do pw protected posts in blogger (as far as i know) is to encrypt it. I think i wrote a tutorial about it.

I dont think u can block someone from visting ur blog lah

QUOTE(eXPeri3nc3 @ Aug 14 2008, 02:52 AM)
@IcedNyior -- Lol you can use DOM to change the words / image after clicking brows.gif
*
DOM? What's that? Sorry noob blush.gif

QUOTE(cracksys @ Aug 14 2008, 04:52 AM)
ah, seems like i visited your blog when the code is not working .. today, i see real spoiler

» Click to show Spoiler - click again to hide... «

*
lol! no worries. interesting blog nonetheless tongue.gif
eXPeri3nc3
post Aug 16 2008, 11:26 PM

It's coming! 3ɔu3ıɹǝdxǝ ♥
*******
Senior Member
9,257 posts

Joined: Aug 2005
From: Not so sure myself Status: 1+3+3=7



QUOTE(IcedNyior @ Aug 14 2008, 06:15 AM)
i think the only way to do pw protected posts in blogger (as far as i know) is to encrypt it. I think i wrote a tutorial about it.

I dont think u can block someone from visting ur blog lah
DOM? What's that? Sorry noob blush.gif
lol! no worries. interesting blog nonetheless tongue.gif
*
IcedNyior, http://www.w3schools.com/HTMLDOM/default.asp smile.gif

I got my code from there... modified to suit myself tongue.gif

http://expskin.blogspot.com (I'm not blogwhoring), click on the navigation part tongue.gif
TSIcedNyior
post Aug 29 2008, 04:40 AM

Regular
******
Senior Member
1,768 posts

Joined: Feb 2008


new test blog >> http://spoilers-in-blogger.blogspot.com/
shinkawa
post Oct 22 2009, 09:40 AM

parttime otaku
*****
Senior Member
855 posts

Joined: Jun 2008



Problem solve....lol..

This post has been edited by shinkawa: Oct 22 2009, 10:03 AM
kurz
post Nov 24 2009, 09:55 PM

Getting Started
**
Junior Member
176 posts

Joined: Sep 2006
From: KL



thanks for the tutorial smile.gif

edit: oops seems like the prob is not solved.

in the main, the spoiler only works for 1st post.

if u click spoiler on 2nd post, it will open 1st post spoiler sweat.gif

This post has been edited by kurz: Nov 24 2009, 11:50 PM
OMG!
post Jun 9 2010, 08:38 PM

Raymond
******
Senior Member
1,397 posts

Joined: Jan 2009
From: Peaceful Island



QUOTE(IcedNyior @ May 18 2008, 08:44 AM)
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 complicated so listen up.

Part 1 :Editing the Theme

First of all, go to your Dashboard >> Template >> Edit HTML

Then look for this line: [cool.gif]]></b:skin> and </head> [/B]. There are two parts of codes.

    First part, insert this code BEFORE ]]></b:skin>
CODE

   .commenthidden {display:none;}
   .commentshown {display:inline;}


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

<script type="text/Javascript">

function togglecomments (postid) {

var whichpost = document.getElementById(postid);

if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }

} </script>


Your HTML coding should now look like this. Don't worry about the difference in the symbol " and " because it means the same thing. Example:
user posted image

Save settings. Thats one part done. Phew!

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:
CODE

<a aiotitle="click to expand" href="javascript:togglecomments('SPOILER_NAME')">Click me to read spoilers</a>

<div class="commenthidden" id="SPOILER_NAME">put your hidden text here</div>


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!

EDIT:I changed the javascript code because there were some errors when you save the HTML. Make sure when you write your post its in EDIT HTML mode and not Compose mode
.

~~~~~~~~~~~~~~~
Adapted from my blog post : Create spoilers in Blogger and Wordpress

Read my other tutorial on LYN> Tutorial : Hide/Encrypt posts in Blogger (+pics)

*
WHere can i look for the Bold Statement? There are so much codes and i am totally blurred seeing all these codes. Mind to guide me?

hilbert00
post May 7 2011, 10:06 PM

New Member
*
Newbie
1 posts

Joined: May 2011
Sorry guys for bringing back to life such an old thread, but I've a question you maybe helping me sorting out. I'm using IcedNyior spoiler code and it works like a charm, but I would like to able to link from another page the spoiler and with the user landing on the "open" spoiler automatically, w/o having to click on the link.

Is this sort of thing possible?

thanks for helping...

hilbert
compiequ
post Jun 21 2011, 06:39 AM

New Member
*
Newbie
1 posts

Joined: Jun 2011
this one is the best example i think


here's the code to spoiler the text

CODE
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://img246.imageshack.us/img246/1215/photodofollowcopy.gif"><img style="float:center; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 128px; height: 128px;" src="http://img246.imageshack.us/img246/1215/photodofollowcopy.gif" border="0" alt="dofollow" title="dofollow" /></a>


user posted image

and here's to spoiler the image
CODE
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://img246.imageshack.us/img246/1215/photodofollowcopy.gif"><img style="float:center; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 128px; height: 128px;" src="http://img246.imageshack.us/img246/1215/photodofollowcopy.gif" border="0" alt="dofollow" title="dofollow" /></a>


user posted image

i posted this on my blog here smile.gif

This post has been edited by compiequ: Jun 21 2011, 06:42 AM
renyyz
post Dec 24 2011, 05:29 PM

Casual
***
Junior Member
450 posts

Joined: Feb 2011
From: Kuala Terengganu


can i ask something?? i use code at 1st page. its work to me but i cant put 2 or 3 spoiler in 1 post. if i click at 2nd spoiler, its open 1st spoiler, not 2nd spoiler.. how can i solve it??
nistamarco
post Jan 10 2012, 05:11 AM

New Member
*
Newbie
1 posts

Joined: Jan 2012
Hello, thanks for the useful script. Unfortunately, i have the same problem of renyyz. In fact, when two posts are present in one page each with a spoiler script inside, if I click on one of them, only a spoiler will open. How can I resolve this issue?
hitokai
post Dec 15 2012, 10:51 AM

Casual
***
Junior Member
350 posts

Joined: Mar 2008
» Click to show Spoiler - click again to hide... «
........


Added on December 15, 2012, 10:53 am
» Click to show Spoiler - click again to hide... «



Added on December 15, 2012, 10:54 am
» Click to show Spoiler - click again to hide... «


This post has been edited by hitokai: Dec 15 2012, 10:54 AM

 

Change to:
| Lo-Fi Version
0.0194sec    0.83    5 queries    GZIP Disabled
Time is now: 5th December 2025 - 02:39 PM