May 18 2008, 08:44 AM, updated 18y ago
Part 1 :Editing the Theme
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>
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:
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)
This post has been edited by IcedNyior: Aug 13 2008, 07:25 AM
Quote
0.0172sec
0.52
5 queries
GZIP Disabled