Home
tutorial
Tips-Tips

Santai Bersama Ben Ashaari

13 January 2011

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 :)


48 000 orang Pengomen Terhebat !!:

ema.amirah said...

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

Lyssa Dollixious said...

@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 .

ema.amirah said...

@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..

Lyssa Dollixious said...

@ema.amirah

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

nadia natasha said...

hye lyssa . nad nak copy tuto lyssa bule ?

Lyssa Dollixious said...

@nadia natasha

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

Zainina Damia said...

<3 !
yea , jd !
TQVM !!

~Sarah Bieber~ said...

Thanks kak :DD

~Sarah Bieber~ said...

Thanks kak :DD

Miss 초콜릿 said...

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

Lyssa Dollixious said...

@Miss 초콜릿

pic yg mana yunkk .??

Slide Float Widget kott ?

Miss 초콜릿 said...

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

zie said...

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..

sarah cika's said...

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

eiman . said...

camna nak download photoshop ?

* SeRa FiNaZ WiNk * said...

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

Nanie Eeteuk said...

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

zarulfarhana said...

xjadi pon

aiNa eiNa said...

tAk jadi la kak . uwhaaaa (!) T_T

nurul shahira said...

. 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/

nurul shahira said...

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

nurul shahira said...

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

auniey atierah said...

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

sYaDa StOrY ! said...

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

NORHIDAYAH said...

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

fienaz said...

jadii , terimass K.Lysaa :0

Cik Kasut said...

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

s'din anuar said...

thanks kak lyssa:)

waa evanss said...

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

ira khairi said...

tanks...dah jadiik

HAAFF said...

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

farah :) said...

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

Aini Ain said...

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

lisa jane said...

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

Mella :D said...

kak lyssa ? mcmna mw bg hide border untuk header?

ohha mimii said...

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

Apple Mushux said...

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

enascha said...

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?

scyAmiemiey sAiDi said...

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

murni said...

@scyAmiemiey sAiDi
macam mne nak letak gambar byk2 ??

Green Apple said...

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

toink+toink+toink n_n said...

akak lyssa code javascript 2 mcm mne ea??

[ wanni ] said...

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

aien azlin said...

Tak mahu pun,

nabila afieqah said...

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

υмвrellα ™ said...

Macam mana nak center kan dia ?

umikecik said...

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

siti nor aishah md noor said...

menjadi....