Cara Pasang Spoiler

Untuk Menyembunyikan Tulisan atau Gambar

Dalam postingan sebelumnya tentang Tebak-Tebakan, juragan Emo dan selingkuhannya penasaran dengan Spoiler yang saya sertakan di postingan tersebut.

Apa Spoiler itu? Spoiler adalah fasilitas untuk menyembunyikan tulisan dan/atau gambar, fungsingya untuk merapikan artikel, memperpendek artikel atau sekedar membuat pembaca penasaran untuk nge-klik seperti postingan Tebak-Tebakan sebelumnya.

Banyak jenis Spoiler, salah satunya yang saya contohnya di sini adalah dengan tampilan kotak berwarna dan disertai fasilitas Show/Hide. Contohnya seperti ini :

Tulisan/gambar yang ingin disembunyikan

Bagaimana cara pasangnya?

Mudah saja karena tidak perlu edit kode template. Yang diperlukan hanyalah co-pas kode di bawah dan tempatkan di area HTML saat menulis postingan.

<div><input style="margin:0px;padding:0px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show"></div><div style="border: 1px solid #000000; margin: 10px auto; padding: 5px; background: #c9d2ed none repeat scroll 0% 0%; width: 500px;"><div style="display: none;">Tulisan/gambar yang ingin disembunyikan</div></div>

Keterangan :

• Ganti kode Show/Hide sesuai dengan keinginan untuk mengganti tampilan tulisan di tombol;
• Untuk merubah lebar kotak, ganti nilai yang berwarna hijau.
• Bila ingin mengganti warna kotak, ganti kode #c9d2ed dengan kode warna HTML yang bisa diambil dari Color Picker program Photoshop.
  

Silakan untuk utak-atik kodenya untuk mendapatkan tampilan yang diinginkan. Selamat mencoba…!!!

(Bila ingin file kodenya untuk disimpan, silakan klik di sini)