Welcome Guest ( Log In | Register )

Outline · [ Standard ] · Linear+

 Tutorial : Create spoilers in Blogger

views
     
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?


 

Change to:
| Lo-Fi Version
0.0160sec    0.56    6 queries    GZIP Disabled
Time is now: 5th December 2025 - 06:41 PM