Ads: (Please Click!)

Sunday, March 22, 2009

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!)
Comments
14 Comments


14 Orang Kentut Madu:

Addeena Dzakwan said... [Reply]

boleh ke tukar spoiler name tu dengan image?

aDuKa イスラム教 said... [Reply]

ok, addeena..
sorry i quite busy lately.. everyday i just looking on coding, coding, and coding.. what more i could do? phew.. i dont expected to expose on this job, actually.. dammit..
about ur question, hm.. just now i visited ur blog then i saw there has 'read me' image at the buttom of ur entries, right? i expect u want that images to be a spoiled.. if so, here the code..

.a aiotitle="click to expand" href="javascript:triggerComment('SPOILER_NAME')">

.img src="http://img16.imageshack.us/img16/4117/read.png"

./a.

done! have a nice try, ok? update me back if u got some probs..

Addeena Dzakwan said... [Reply]

okay, thanx;) i just need the code on how to put the image actually, none other, it worked of course;) thx btw.

aDuKa イスラム教 said... [Reply]

u r welcome.. did u already apply to your blog? wanna seeeeeee.. =P

HRshoppe said... [Reply]

I nak letak dekat blog i info produk after the product image, boleh kan wat spoiler? The prob now, i am using wordpress, cari punya cari, i tak jumpa the word skin.. hehhe.. boleh tulung ka cekgu?

aduka said... [Reply]

hrshoppe: wordpress ek? ntah la.. sy x pernah pkai wordpress.. u bleh try cri dlm google.. rsnya byk stuff n tutorial psl tu.. tutorial kat atas ni utk blogger shj.. see the title..

arnamee said... [Reply]

Salam cik pemenang..

Tahniah..

tadi sye tgok2, tibe2 minat tang spoiler ni,sye wat2 lah, ALhamdulillah menjadi.

terima kasih ea..jasamu dikenang2^^

aduka said... [Reply]

arnamee: wsalam.. terima kaseh.. semoga bermanfaat.. =)

☺[ai][sUmi]☺Chan said... [Reply]

nk buat tp xpbrape paham.. utk 1entry je nk buat camtuh..

lalink7 said... [Reply]

it worked..yeay~
thanks yar

lalink7 said... [Reply]

aduka..
nak tanya...
aku dah buat spoiler nie tapikan..kenapa satu entri je boleh klik readmore/less..

entri kedua dan seterusnya dia xberfungsi..
entri pertama je yang berfungsi..
kenapa ye?

Aduka said... [Reply]

@lalink
pastikan SPOILER_NAME tu x sama dengan entry yg pertama.. klu dah buat, make sure braket tu btol.. sbb kdg2 kalu kurang or lebih braket, dia leh jd x berfungsi langsung..

lalink7 said... [Reply]

aduka ~ maksudnya..SPOILER NAME entry pertama dengan entry kedua dan seterusnya mesti berlainan ye?
xboleh sama? rite?

Aduka said... [Reply]

@lalink
ya.. mesti nama lain..
x boleh sama..

Post a Comment

Ruang komen telah di-set sebagai 'dofollow'. Sila tinggalkan URL blog anda dengan cara yang bijak. Baca DI SINI untuk mempelajari SEO mengenai 'dofollow' link.

Kepada ANONYMOUS, sila tinggalkan link dengan cara yang bermoral sedikit.

Terima kasih kerana sudi membaca artikel ini dan menurunkan komen anda.

 

Blog Aduka Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger