Tutorial Cara Buat Button Show-Hide Spoiler

 click to zoom

Hasil selepas di klik...
click to zoom

Hai all...Semalam koz dah ajar "Cara Buat Button Untuk Blog",jadi hari ini koz akan ajar benda yang sama tapi hasilnya lain.Button Spoiler ini fungsinya adalah untuk menyimpan isi sesuatu post,JavaScript atau gambar caranya lebih kurang seperti Hide/Show Shoutbox yang koz ada buat tutorial sebelum ini.

Sebagai contoh seperti berikut:-

Pengunaan spoiler untuk widget di JavaScript









Mari Cuba Mana Tahu Dapat Tingkatkan Pengunjung Di Blog Korang^^











Penggunaan Spoiler untuk Text/posting
Hai all...Semalam koz dah ajar "Cara Buat Button Untuk Blog",jadi hari ini koz akan ajar benda yang sama tapi hasilnya lain.


Button Spoiler ini fungsinya adalah untuk menyimpan isi sesuatu post,JavaScript atau gambar caranya lebih kurang seperti Hide/Show Shoutbox yang koz ada buat tutorial sebelum ini.blablablabla....


Penggunaan Spoiler untuk gambar

Cuba teka..gambar apakah ini??
click to zoom


click to zoom



Sudah paham?jadi berikut adalah langkah-langkahnya...

Langkah 1

Copy dan paste code di bawah pada JavaScrip/Posting

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Pamirkan" 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 = 'Pamirkan'; }" 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>



Langkah 2

Pada code berwarna merah korang boleh ubah ayat "Pamirkan" kepada ayat yang korang nak(fungsi sebelum spoiler di buka)
Pada code berwarna hijau korang boleh ubah ayat "Tutup" kepada ayat yang korang nak(fungsi selepas spoiler di buka)
Pada code berwarna biru korang letak code JavaScript,gambar atau text yang korang nak.

Save dan Lihat hasilnya...

Camat mencuba...
Ranking: 5

Comments:14

06 July, 2010 11:27

wahhh..canggihnyer...
huhu..
nak try jap..
kalo jadik..
nanti komen agy..
ehehee

06 July, 2010 11:36

erm..
tak berfungsi lah...
cmne nih....
aku try xubah banyak-banyak..
tapi xleh gak..
help me plz...

06 July, 2010 12:02

..eh3..jap2...td ader try bat selain wawwi..tapi boleh..
wawwi pulak da xleh bukak...

06 July, 2010 12:20

wow!!hebat!!

wah bagus2x.. nak try lah... harp menjadi le...

06 July, 2010 16:12

tak paham lahh.. nak paste kat mane?

06 July, 2010 16:51

thank u.. dah jadik dah.. hehehe

07 July, 2010 11:32

Tq budak nakal yang comel, memang dah cadang nak tanya macamana nak buat button tu,tp malu2 Kuching pulak ummiross ni, dah buat dah tadi, jadik...mekasih banyak

07 July, 2010 13:24

ni leh buat ntk award ke?
=)

10 July, 2010 11:17

salam...

Cool..nak cuba gak ler..thanks sharing.. :i:

20 July, 2010 15:36

dah jadi la....tq budak nakal...hehe

24 July, 2010 00:57

jadik2...tq...best2....(n_n)/

19 November, 2010 16:19

all tuto kamu sgt bergunaaa!! yayy!! thankss...

19 January, 2011 09:37

Salam kenal ... thks 4 tips ... Keren sekali

Post a Comment

Komehlah dan klik G+ di atas sekali okey^^

 
Google PageRank Checker Powered by  MyPagerank.Net