Cara Membuat Spoiler dan Memodifikasinya

Masih ingat artikel yang berjudul membuat tombol jika di klik muncul teks/gambar?, ternyata namanya spoiler. Berhubung tadi saya berhasil utak-atik kode spoilernya, maka kali ini saya akan mencoba memberitahu hasil modifikasi spoiler di blogspot. Lihat perubahannya:

» spoiler standar:

isi teks atau kode gambar yang disembunyikan dibalik tombol

» spoiler modif:

isi teks atau kode gambar yang disembunyikan dibalik tombol

Dan ini cara modifikasinya.

<div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><input value="Tampilkan" style="margin: 0px; padding: 5px; width: auto; font-size: 10px; background:yellow; color:blue; border:1px dashed red;" 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 = 'Tampilkan'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: 2px dashed red; color:blue; background-color:yellow; text-align: justify; padding:10px;">isi teks atau kode gambar yang disembunyikan dibalik tombol</div></div></div></div></div>

Keterangan:

1. <input value="Tampilkan" style="margin: 0px; padding: 5px; width: auto; font-size: 10px; background:yellow; color:blue; border:1px dashed red;"
   
   • "Tampilkan" dan 'Tampilkan'; : teks yang akan muncul pada tombol sebelum di-klik.
   • background:yellow : warna latar belakang/background tombol (yellow)
   • color:blue : warna teks tombol/spoiler (blue)
   • border:1px dashed red : garis tepi tombol setebal 1 px, model dashed, warna merah.
     Artikel tentang border baca DISINI
2. 'Tutup'; : teks yang muncul pada tombol setelah diklik.
3. <div style="border: 2px dashed red; color:blue; background-color:yellow; text-align: justify; padding:10px;"> : variasi pada kotak area yang akan ditampilkan setelah tombol/spoiler diklik. Pelajari sendiri ya :D
4. isi teks atau kode gambar yang disembunyikan dibalik tombol: ganti dengan teks yg akan disembunyikan.

Sekian dulu, semoga bermanfaat.

Nb: SPOILER = tombol jika di klik muncul teks; bukan berarti Belajar SEO Para Pemula,huehehe :p