1.09.2010

Mengubah Teks Menjadi Spoiler

Oke kawan...yang terakhir adalah teks yang di rubah menjadi spoiler berikut kodenya yaaaaaaaaaaaaaaaa :
<div id="aditya"><div><div id="show" style="display: none;"></div><div id="aditya"><div><p style="width:100px; color:#00FF00;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide aditya!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show aditya!'; }">Teks yang akan di jadikan spoiler</p><div id="show" style="display: none; color:red;">TEKS DAN GAMBAR YANG INGIN DI TAMPILKAN</div></div></div></div></div>
Contoh:

Kalo Aditya Cakep Klik Di SINI(hehe)

Keterangan Vital :
color:#00FF00 adalah warna teks yang akan di jadikan spoiler
color: red adalah warna teks ISI dari spoiler
(mudeng ga? di coba aja yoooooo.......)

Kelemahan spoiler ini adalah baik form/teks/gambar tidak bisa di sisipkan kedalam paragraf jadi butuh spasi baru untuk meletakan spoiler tersebut, saya akan coba ngutak-ngatik lagi n cari-cari tutorial lagi untuk di modifikasi agar form/teks/gambar bisa di sisipkan kedalam paragraf dan isi dari spoiler bisa melayang di atas paragraf, tanpa mengganggu tulisan lainya (bingunggggggg??????????) tunggu aja deh....sementara pake yang ini aja lagian kan kebanyakan spoiler versi ini yang di pakai oleh para blogger ya toh?
Tak tunggu komentarnya n saranya bila ada yang salah ya.....yang jelas scritpt-script spoiler ini berfungsi kok kan udah tak kasih contohnya toh ? seperti biasa klo ada yang mau kopas untuk konten blognya....jangan lupa sertakan sumbernya ya.......trims bgt.

18 komentar temen:

Inuel^-^ mengatakan...

boleh ni di coba, besok yah mas, klo sempet, khehehe.. udah malemmm ngantukkkkkkk ^_^

Edo Belva mengatakan...

wuih...rajin banget mas bikin giniannya,,hehe

Munir Ardi mengatakan...

inul untuk gambar yang sembuni itu yah mas wah makasih tutorialnya saya belum pernah pakai spoiler karena memang belum tahu

Newsoul mengatakan...

Info mantap. Cuma kalau yang membaca gaptek seperti saya ya musti dimamah pelan-pelan. Dit ajarin mengubah blog saya jadi dofollow dong....

tukangpoto mengatakan...

Wah ora mudeng aku mas Adit, spoiler itu apa sih ? soalnya nggak ngikutin dari pertama sih..nanti tak baca dulu seri pertamanya..

SeNjA mengatakan...

infonya ok dit,...mksh ya...nanti aku coba ahh,tapi berhubung aku gaptek harus pelan-pelan dit... ^_^

Mr.Astroboy mengatakan...

lah, kalo yang spoiler biasa gimana mas?

tapi htmlnya agak ribet juga ya..

Clara mengatakan...

hehehe, tips ini bagus nih
tapi pasti saya males pake
tepatnya males ngutak ngutak

Insanitis37 mengatakan...

Iya, iya...Aditya emang cakep kok, hehehe

Fais cWaKep mengatakan...

mantap ni tutor'y mas.

Teknologi Informatika mengatakan...

hahaii tutor yang bagus..
thanks...

anyin mengatakan...

aku gapaham mas T__________T

imam77 mengatakan...

Kabar Baik sob,,'
sendirinya gmna?? wew,, mantap nih artikel, di coba ahhh!!

suraduja mengatakan...

sob saya pengen nanya nih, ketika spoiler teksnya di klik, kan keluar teks lagi di bawahnya, nah saya pengen ngeluarin teks nya di samping spoilernya, gmana itu sob, soalnya mau saya pasang di bagian footer bar blog saya, kan gak seru kalo sampingnya itu kosong, thank's ya sob

Aditya's Blogsphere mengatakan...

@suraduja....sebenernya sih bisa.....ntar saya buatkan tutorialnya yah.....sementara ini dulu....ada model spoiler lain yaitu spoiler melayang......ntar saya post kan siapa tau bermanfaat!!!

suraduja mengatakan...

thank's ya sob tutorialnya saya tunggu

suraduja mengatakan...

oya, tutorial yang ini juga udah saya pake untuk footer blog saya, coba anda lihat di bagian paling bawah footer di blog saya yang ada tulisan "<< >>", sip lah sob, lanjutkan........

Tubaguz Deden Anwarudin mengatakan...

" Teks anda disini "

udah di ganti tp gak berubah . . . . .