Tutorial : Button Show-Hide Spoiler

Salam~
Tutorial ni , agak menarik jugak lah ! And agak unik !
Korunk try lah k.?
But b4 tuh , Lyssa nak tnya korang !

Korang tahu ke, aper itu
Button Show-Hide Spoiler???

Oke , korang try usha2 kat sidebar blog Lyssa ney ,
ada tak yang macam ini ??


Ada kan ??
Try klik "Click Sini" . Ada apa2 perubahan tak? Bila klik , akan jadi macam ni !


Okeis~ Cara nyer simple jer. :)

1. Log in > Dashboard > Add Gadget > Html/Java Script

2. Copy dan paste code di bawah pada JavaScript :

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Klik Sini" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Klik Sini'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

Masukkan Code JavaScript/Gambar/Text Di sini

</div></div></div></div>
* Pada code warna MERAH , tukar kan dengan perkataan korunk !(fungsi sebelum spoiler di buka)
* Pada code warna HIJAU , tukar kan dengan perkataan korunk !(fungsi selepas spoiler di buka)
* Pada code berwarna BIRU korang letak code JavaScript,gambar atau text yang korang nak.

3. Save .! Lihat hasilnya :)

KONGSIKAN ARTIKEL INI..
Previous
Next Post »

49 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
ema.amirah
AUTHOR
January 28, 2011 at 8:39 PM delete

kenapa sume wat tak jadik.... :(
dy boleh klik2 tu, tapi kan dy kosong je. means gambar, dy kuar url pic tu. tak kuar gambar..

avatar
January 28, 2011 at 9:14 PM delete

@ema.amirah

ohh , mybe myra paste kt tmpat lain kot , or , url gmbat slaah ;) sepatotnyer , masa letak url gmbr kena buat cam niyh !

< i m g s r c = "URL GAMBAR" / >

buat cm niyh taww ?rapat kan smua nyer ;) kecuali antara img dgn src ;) try dulu .

avatar
ema.amirah
AUTHOR
January 28, 2011 at 9:25 PM delete

@Lyssa Dollixious
lyssa, sama jugak. emm, cuba lyssa view profile mira jap. bila tekan tuh dy kuar url tuh balik. mybe lyssa lea tlong ke..

avatar
January 28, 2011 at 9:53 PM delete

@ema.amirah

ohh , yg kod mira tu , jangan ada space langsung , kecualii , di antara IMG ngn SRC yang lain , semua rapatkan k ?

avatar
nadia natasha
AUTHOR
February 2, 2011 at 7:42 PM delete

hye lyssa . nad nak copy tuto lyssa bule ?

avatar
February 2, 2011 at 8:03 PM delete

@nadia natasha

yea , boleh , tp , kena letak credit to : Lyssa ok ?:))

avatar
Anonymous
AUTHOR
March 16, 2011 at 1:56 AM delete

<3 !
yea , jd !
TQVM !!

avatar
April 5, 2011 at 6:07 PM delete

hye lyssa.. mcm mne na buad bgy semua link tu trun strait ke bwh eh?
mcm pic yg lyssa tnjuk dkt tuto tu?

avatar
April 5, 2011 at 8:35 PM delete

@Miss 초콜릿

pic yg mana yunkk .??

Slide Float Widget kott ?

avatar
April 5, 2011 at 9:53 PM delete

pic dkd tuto btton show-hide spoiler..pic yg k-2 tu..

avatar
Anonymous
AUTHOR
April 12, 2011 at 7:04 PM delete

lisa, zie nak tanya.. nape ek zie wat tuto ni tuk letak code banner zie. tapi bila paste code 2 dia kuar picture gak. xkuar pon code. cmne ek?? dah bnyk kali wat ttp mcm 2..

avatar
sarah cika's
AUTHOR
April 14, 2011 at 9:47 PM delete

aii akak adeq wat die jadi megiring jer ... jnuh la saye nk wat yg kebawah jer cer bagitaw camner/.,

avatar
AimanBieber.
AUTHOR
April 28, 2011 at 5:19 PM delete

camna nak download photoshop ?

avatar
sera finaz
AUTHOR
May 9, 2011 at 11:06 PM delete

akak thanks ye .. anyway nak tanya mcm mana nak wat my status 2 ?? mcm best je ... plz ajari saya kak ... :P

avatar
Nanie Eeteuk
AUTHOR
May 17, 2011 at 10:16 AM delete

Thanks sbb bg tuto.Dh jd pun,tapi tak lah cantik sangat...hehehhe..Thankx kak lyssa

avatar
aiNa eiNa
AUTHOR
June 3, 2011 at 9:15 AM delete

tAk jadi la kak . uwhaaaa (!) T_T

avatar
Anonymous
AUTHOR
June 6, 2011 at 11:05 PM delete

. kaka lyysa , saie wd ta jdi puwn =(( ble saie klik kn , text yg saie 2lis ta mcm kaka lyysa pnyer smple pict yg kt atz huh . cbe kaka lyysa tgk .. dha lme na wd .. ble dha wd , ta jdi plaq .. help me ??
http://ieragirlwhatever.blogspot.com/

avatar
Anonymous
AUTHOR
June 6, 2011 at 11:08 PM delete

. kaka lyysa , saie wd ta jdy puwn .. cbe kaka tgk kt wall saie niyp ..
sdeyh tol ta jdy =(( http://ieragirlwhatever.blogspot.com/

avatar
Anonymous
AUTHOR
June 6, 2011 at 11:36 PM delete

, knape ta jdy sys lyysa .. cbe tgk kt wall saie ..

avatar
June 7, 2011 at 8:34 AM delete

kak lyssa ..
mcm mane na bagyy text tuhh center ?
ouhh~ terlupe~ thengs yee kak lyssa ..

avatar
sYaDa StOrY !
AUTHOR
June 9, 2011 at 9:45 AM delete

@ema.amirahkak lyssa bule tgk adek punye blog x ?www.syada-story.blogspot.com/
adek buat semua x jady , na tye ?

avatar
NORHIDAYAH
AUTHOR
July 1, 2011 at 10:53 PM delete

salam lyssa, thanx for all the tutorials...

awak study sc comp ke multimedia? tabik r dpt maen dgn coding2 gini. huhu

http://920norhidayah423.blogspot.com/2011/07/credit-tutorial-to-them.html

avatar
Fynaz Razman
AUTHOR
August 14, 2011 at 10:45 PM delete

jadii , terimass K.Lysaa :0

avatar
Cik Kasut
AUTHOR
August 18, 2011 at 2:43 AM delete

nape x blh yek???yg kluar klik d sini jer...yg len xde langsung... :(

avatar
Wawa Aziz
AUTHOR
October 22, 2011 at 11:22 AM delete

kak ! url gambo tu amek kat ner ? HIHI 'D

avatar
HAAFF
AUTHOR
November 17, 2011 at 3:22 PM delete

Thanks..Rasenye jadi nih...hehe..
jemputlah datang belog yek..
=)

avatar
farah :)
AUTHOR
November 19, 2011 at 5:22 PM delete

kak lyssa thankyouuu so muchhh :) Jadi punn akhirnya , hewhew :'D

avatar
Cik Aini
AUTHOR
November 28, 2011 at 5:10 PM delete

Ta phm la kak lyssa .. kak lyssa tlg uatkn b0leyh ta ? pning dh aini .. :(

avatar
lisa jane
AUTHOR
December 4, 2011 at 5:31 PM delete

wei cam ner nak buat klik tu susah la...

avatar
Mella :D
AUTHOR
December 7, 2011 at 10:41 PM delete

kak lyssa ? mcmna mw bg hide border untuk header?

avatar
^^
AUTHOR
December 14, 2011 at 11:34 AM delete

lyssa ,kalau nak letak gmbar cane ? dy perlu code eh ? mane nak dapat code nye tu ? :)

avatar
Mrs. Fapple
AUTHOR
December 14, 2011 at 11:49 AM delete

slm akak , mcm mane na letak gambar sendiri ea dalam button show hide spoiler nie ?

avatar
enascha
AUTHOR
December 15, 2011 at 4:23 PM delete

salam.. kak lyssa, knpe ena buad text nya mengiring tak kebawah? da byk kali buad tpy tak jady2 jgak. kak lyssa ley tnjukkn tak cmne nak buad?

avatar
mie.
AUTHOR
January 8, 2012 at 2:51 PM delete

weee da jdi pn .. thanks a lot for the tuto ..

avatar
moon
AUTHOR
January 13, 2012 at 4:47 PM delete

@scyAmiemiey sAiDi
macam mne nak letak gambar byk2 ??

avatar
Green Apple
AUTHOR
January 20, 2012 at 8:56 PM delete

salam..
mcm mane nk buat anak panah mcm lyssa ??? yg ade tulisan lyssa 2?? blh ajar x ??

avatar
March 10, 2012 at 12:46 AM delete

akak lyssa code javascript 2 mcm mne ea??

avatar
H.K.L
AUTHOR
March 15, 2012 at 3:41 PM delete

dah jadik, akak buat untuk fibox... thanks a lot :)

avatar
Unknown
AUTHOR
December 31, 2012 at 10:46 PM delete

akak...code javascript tu apa? saya tak faham..tolong ajarkan saya..

avatar
Unknown
AUTHOR
January 24, 2013 at 1:18 PM delete

Macam mana nak center kan dia ?

avatar
CikBiyy
AUTHOR
February 14, 2013 at 12:22 AM delete

kak lyssa , macam mane nak kecikkan gambar tu ye?jadi besar pulokk..hehe

avatar

.Assalamualaikum.
.Sila Tinggalkan Comment Anda Di Sini.
SATU pun jadi lah ! hehe. EmoticonEmoticon