How to make a spoiler button (versi 3)

Aye-aye..
At [L]ast, sampai pada tutor terakhir tentang spoil button >_<
Err, I mean, I HOPE ini tutor terakhir tentang spoil button Dx

Apa yang bikin beda sama spoil versi 2?
Well, button kedua na na sama-sama nggak akan ilang pas di'klik.
BEDA NA!!! Woi Dx
Ngg, klo versi 2, tulisan di button pas di'klik sama udah di'klik kan sama.
Klo versi 3, beda (???)
*Bingung sendiri cara ngomong na*

Se-seperti biasa, langsung praktek saja..

Kode na..

<div id="spoiler"><div><input value="Show Spoiler" style="margin: 5px; padding: 0px; font-size: 11px; font-weight:bold;" 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 Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler'; }" type="button"><div id="show" style="border: 1px solid white; margin: 5px; padding: 2px; display: none; width: 98%;">TULIS ISI SPOIL DISINI</div><div id="hide"></div></div></div>

Hasil na..

TULIS ISI SPOIL DISINI

Sekarang ngerti kan apa yang dimaksud sama "tulisan di button pas di'klik sama udah di'klik beda"? *smirk*

Perhatiin, tulisan Show Spoiler na, ada dua. Bisa aja sih salah satu na diganti. Tapi biar nggak ribet, klo pun kamu mau ganti, mending tulisan dua itu samain. Tulisan Hide spoiler na juga bisa diganti, tapi yang ini bedain sama yang dua tadi :)

Ngomong-ngomong thx buad Akane & Maya. Nggak nyangka *ternyata* ada juga yang ngasih komen buad tutor nggak guna kaya gini.
Blog Akane udah pake co.cc tapi masih URL Forwarding ya? Ih waw, jadi kepikiran buat bikin tutor setting custom domain co.cc di blog *evil grin*
Well, tapi tutor begituan udah banyak berserakan di net sih --'
Nanti punya saiaa hanya akan jadi sampah (memang na tutor kaya gini bukan sampah?!).

How to make a spoiler button (versi 2)

Yay!
Finally, sampai pada another stupid tutorial from Rain :D
Btw sori buat shino, tutor na telat. Pas tutor spoil pertama itu beres dibikin n diposting, tau na kamu udah pasang begituan di blog kamu =,=
Ja-jadi buat apa aku bikin tutor *nangis guling-guling*

Masih melanjutkan postingan sebelum na, kita bikin spoiler button lagi.
Lagi? Nggak kok, nggak akan sama tapi na..
Klo spoil yang kemarin itu kan pas di klik button na langsung ilang, tapi yang ini nggak.
Binun? Saiaa juga =,=
Langsung praktek aja --'

Kode na...

<div id="spoiler"><div><input value="Tulisan di button" style="margin: 5px; padding: 0px; font-size: 11px; font-weight:bold" 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 Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Spoiler'; }" type="button"><br /><div id="show" style="border: 1px solid white; margin: 5px; padding: 4px; display: none; background-color: transparent; width:95%"><br />TULIS ISI YANG MAU DISEMBUNYIIN DISINI</div></div></div>

And it's time for, HENSHIN!!!
Beginilah hasil na.

TULIS ISI YANG MAU DISEMBUNYIIN DISINI

Ba-bagaimana?
Lebih advance dari spoil yang dulu, kan? *sparklin*

Sama, klo nggak mau pake border, ganti aja style border na jadi 0px.

JOIN!
NAKAMA - One Piece Indonesia

http://nakama-id.co.cc

Heran, kok bisa ya aku serajin ini sampai bikin tutor x(
Yadda..yadda..
Dan di dunia ini nggak ada yang gratis.
Kasih komen klo udah baca --'

Masih ada 1 versi spoil button lagi..
Itupun klo kalian masih minat dan nggak eneg sama tutor macem beginian --'

How to make a spoiler button (versi 1)

Yo^^..
Welcome to the stupid tutorial from Rain :)
This tutor dedicated for my Nakama, shinobu yang mina dibikin beginian^^ (maaf sempet bilang males, ohckck)
Buat bikin spoiler button, tinggal pake kode ini..

<div style="border: 1px solid white; padding: 0px;"><div><button type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Tulis teks yang mau ditampilin pas cursor diarahin ke button spoiler"><span style="color: rgb(0, 0, 0); font-family:tahoma; font-size:11px;"><b>Tulisan di button spoiler</b></span></button></div><div id="spoiler" style="display: none;">TULIS ISI YANG PENGEN DISEMBUNYIIN DISINI</div></div><br />


Klo kode diatas dipake, hasil na bakal kaya gini..

TULIS ISI YANG PENGEN DISEMBUNYIIN DISINI

Tinggal edit-edit aja bagian yang butuh diedit --'
Ngomong-ngomong aku pake font Tahoma ukuran 11px buat spoil diatas.
Trus klo mau, pakein aja tag center diawal kode spoil biar keliatan lebih proporsional. Itu bakal bikin semua tulisan jadi ada ditengah

Ta-tapi klo pengen button na ada di tengah tapi isi spoil na tetep dipinggir, pake kode ini.

<div align="center" style="border: 1px solid white; padding: 0px;"><div><button type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Tulis teks yang mau ditampilin pas cursor diarahin ke button spoiler"><span style="color: rgb(0, 0, 0); font-family:tahoma; font-size:11px;"><b>Tulisan di button spoiler</b></span></button></div><div align="left" id="spoiler" style="display: none;">TULIS ISI YANG PENGEN DISEMBUNYIIN DISINI</div></div><br />


The result..

TULIS ISI YANG PENGEN DISEMBUNYIIN DISINI

Karena template blog aku warna na item, maka na border na putih =,=
Klo nggak mau putih, liat bagian <div style="border: 1px" solid white>. Si white na ganti sama warna yang kamu mau.
Eh, biar bener-bener kaya spoil, ilangin aja border yang di pinggir na :D
Tinggal ubah bagian <div style="border: 1px">, border na ganti sama 0px.


Ngg, aku yakin sih semua orang udah tau gimana cara na bikin spoil kaya gini.
Jadi klo ada yang komen klo tutor ini nggak guna, aku maklum =,=

JOIN!
NAKAMA - One Piece Indonesia

http://nakama-id.co.cc