Tutorial : Button Show - Hide Spoiler New Version (RULES)

Gadis Kidal Berceloteh...
04/12/2011

.Assalamualaikum !
Peacee ^_^v


Haii . Okeyy , Kali ni Lyssa ada terima request untuk buat tutorial RULES macam dekat atas shoutbox Lyssa tuu . Alar .. Macam bila klik je button tuh , akan keluar ayat kita . Contoh macam ni :


Sebelum Klik :

 

Selepas Klik :

 


Tutorial macam ni , pernah Lyssa buat dulu . Tapi dulu macam tak berape nak cantik lah .
TEKAN SINI untuk lihat old version punya :)  Tak lawa kan ? Kali ni , korang bolehlah letak background sekali dalam button tuh . hikhik#
 
Okey , Nak jugak belajar buat benda Alar nih ? Boleh .. Jom Lyssa ajarkan erk ^_^v


1. Log in > Dashboard > Design > Add a Gadget > Html/JavaScript

2. Korang copy kod ini :

<center><div id="spoiler"><div><input value="Tajuk apa-apa" style="width:88px ;font-size:12px;background-image: url(URL BACKGROUND UNTUK BUTTON);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide Spoiler!&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;none&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show Spoiler!&#39;; }" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">
<center><center>Ayat korang apa-apa</center></center></div></div></div></center> 
 
3. Paste kan di bahagian Html/Javacsript tu :)

Warna Ungu : Tulis perkataan sebelum klik button . (Contoh : Rules)

Warna Biru : Paste kan URL background . ( Boleh dapatkan DI SINI ) - Copy direct link :) 

Warna Merah : Tulis lah apa - apa ayat korang selepas button di-klik . Okeyy ?


4. Dah ubah semua ? Okeyy , sekarang SAVE ! :)

5. Now , cuba tengok dekat blog korang . Menjadi takk ? =.=


=Selamat Mencuba= peacee ^_^v


KONGSIKAN ARTIKEL INI..
Previous
Next Post »

43 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
Hizatul
AUTHOR
December 4, 2011 at 9:26 AM delete

oh,nak try laa..thanks Kak Lyssa :D

avatar
eira yasin
AUTHOR
December 4, 2011 at 9:44 AM delete

dah try dah. nice. thanks kak. tapi cane nak bold kan tulisan tu ek?

avatar
Unknown
AUTHOR
December 4, 2011 at 9:56 AM delete

menarik ni...nak try lah...maceh dear!

avatar
Unknown
AUTHOR
December 4, 2011 at 10:33 AM delete

Saye pun dh torai....tp mcm kak eira yasin ckap...cmner nak bold kan tulisan tu...???

avatar
Anonymous
AUTHOR
December 4, 2011 at 10:36 AM delete

nice tuto :D

avatar
GeeGee
AUTHOR
December 4, 2011 at 12:42 PM delete

kak Lyssa memang awesome !

avatar
Myra Azraff
AUTHOR
December 4, 2011 at 1:18 PM delete

kak,saye try tuto ni yer,makasih
lalala ♫

avatar
Cikrosecute
AUTHOR
December 4, 2011 at 1:21 PM delete

Thanks...Akak jadik buat hehehe

avatar
December 4, 2011 at 1:35 PM delete

salam lyssa .nk tnye, cmne nk wt shoutbox yg hide chat2 follwer 2 .just ade owner,blog urln talk2 .

avatar
December 4, 2011 at 2:13 PM delete

akak ... sye nak tanyer,, kat sidebar akak ken ader like sini , muntah d'sni ngan about me .... cane nak wat !?? akk tlong ajr tau !! tq ^____^

avatar
awanputih
AUTHOR
December 4, 2011 at 2:47 PM delete

da jdikk,! thanx kak lyssa,,

avatar
Syimi
AUTHOR
December 4, 2011 at 3:05 PM delete

jady ! thanks kak lyssa cute :)

avatar
Alia Syaza :)
AUTHOR
December 4, 2011 at 4:47 PM delete

whoaaa... mcm best jea ni kak lisa ^^

avatar
liyanazahirah
AUTHOR
December 4, 2011 at 5:52 PM delete

thanks kak lyssa..erm..nak tnye nie..macam mane nk buad show-hide spoiler nie utk shoutbox..maksudnyer kalo kite klik die kuar shoutbox..errr..bole x..plizz

avatar
Fatin Farhana
AUTHOR
December 4, 2011 at 7:11 PM delete

kak lyssa kalau bubuh URL background yg kt google punye boleh x sbb sya tengok kt situ x de la yg cantik2 sya x fham msa background URl tu mcm mne ye boleh terangkan kak lyssa

avatar
syazwana
AUTHOR
December 4, 2011 at 7:54 PM delete

kak tak leh pn..gmba mmg kluar..code de skli kluar@Hizatul

avatar
December 5, 2011 at 1:25 AM delete

As Salam. Nak tanye sikit. Kak Lyssa, nuffnang tu selamat tak untuk org yg under 18? mcm sy :D

avatar
Nisa Single
AUTHOR
December 5, 2011 at 4:46 PM delete

sye ke yg request ???
btw , thankx kak lyssa ! ^_^"

avatar
shera
AUTHOR
December 6, 2011 at 5:54 PM delete

da berjaya . sudah jadi .

avatar
NaD Dea
AUTHOR
December 7, 2011 at 11:34 PM delete

dh try.mnjdi la.thanks~

avatar
Aimi'Aqilah
AUTHOR
December 8, 2011 at 11:28 PM delete

heh . k.lyssa daa try . xmnjd p0n . ape xkna tau . =,=

avatar
Eiqa Nur
AUTHOR
December 9, 2011 at 1:19 PM delete

dah try kak.hehe..tq tapi mcm mana nak besar kan sikit ea?? saya punye kecik sngt lah..hehe

avatar
December 10, 2011 at 7:56 PM delete

tenquiq kak lysaa . dah tray . (MENJADI). XD .

avatar
ohh susy
AUTHOR
December 15, 2011 at 4:28 PM delete

kak lyssa mcm mne nk wt title tajuk 2 ea...adeq susy wt asik tak jdi jew kak lyssa...

avatar
Cik Ziela
AUTHOR
December 17, 2011 at 9:28 AM delete

mnjadi la..thanks kak lyssa ^0^

avatar
ICESS
AUTHOR
December 17, 2011 at 7:01 PM delete

sis lyssa,saya buat jadilah!
thanks sis!

avatar
December 18, 2011 at 3:11 PM delete

weheeeeeeeee ! yess dah jadi kak lyssa , terima kasih :)

avatar
alisa
AUTHOR
January 7, 2012 at 12:36 PM delete

Tengs kak Lyssa.. Dah menjadi.. Tengs agains!

avatar
alisa
AUTHOR
January 7, 2012 at 12:36 PM delete

Tengs kak Lyssa.. Dah menjadi.. Tengs agains!

avatar
Unknown
AUTHOR
January 25, 2012 at 9:43 PM delete

thanks kak lyssa... menjadi!

avatar
Sakinah
AUTHOR
March 25, 2012 at 4:02 PM delete

Npe sy wat x de background ek ??

avatar
May 30, 2012 at 3:41 PM delete

kakak cantik, nak tanya :) kalau nak buat anak panah kita turun mcm menda un acano? haritu buat tapi terpadam, terlupa dia punya link :) TOLONGLAH

avatar
hanim
AUTHOR
June 24, 2012 at 6:45 PM delete

Awesome !!! Thankss :)

avatar
Anonymous
AUTHOR
December 26, 2012 at 12:48 PM delete

TQ akak! :D menjadi pun ~ boleh re-post x?

avatar

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