Tutorial: How to create spoiler in Blogger

this tutorial is for you folks who has own blog hosting with blogger.com URL.. previously, Wan@Jasper had sent a request to me about 'spoiler tutorial', but i said, i'd already posted the related topic in my blog entry.. unfortunately, i wasn't! haha.. i'm so sorry, Wan@Jasper.. cause of too much messy tasks lately, make me ease to forget everything lah..! by the way, here it is.. i hope you, and other readers as well, getting some benefit from this tutorial.. although this tutorial i picked from public forum, i think it should be nice if we share it, right? so, if you got some cofusing or else, don't hesitate to ask by drop your text into comment field, okay?

Step 1 : Edit your theme

first of all, go to your Dashboard --> Layout --> 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>

.hidecomment {display:none;}
.showcomment {display:inline;}


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

<script type="text/Javascript">
function triggerComment (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="showcomment") { whichpost.className="hidecomment"; }
else { whichpost.className="showcomment"; }
}
</script>


your HTML code supposed be look like this:

Click image above to full view (auto view in new window)

if perfectly same, then save your codes..


Step 2 : Creating spoiler in your blog post

this step will explain on how to create a spoiler in you blog entry.. please keep remind that it will be some hard coded here which make you feel some difficulties.. it requires a little more work (to whom is not so familiar with javascript code)..

below is the spoiler code;

<a aiotitle="click to expand" href="javascript:triggerComment('SPOILER_NAME')">Click me to read spoilers</a>
<div class="hidecomment" 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> don't 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 perfectly..

this is example text that you want to post into your editor;

first paragraph
second paragraph
third paragraph

then, you are require to spoil from the second paragraph to the end.. so then, your code should be like this..

first paragraph
-- start spoiler --
second paragraph
third paragraph
-- end of spoiler --

so, you have to post like this;

first paragraph

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

<div class="hidecomment" id="SPOILER_NAME">
second paragraph
third paragraph</div>

that's it! i hope this tutorial helps.. have a try and good luck!

PERHATIAN! Aktiviti PLAGIAT (copy & paste) sesuatu artikel tanpa pengetahuan dan kebenaran penulis adalah satu aktiviti/perbuatan yang TIDAK BERMORAL!

Ads: (Please Click!)