Cara Membuat Spoiler

Sebenernnya trik ini banyak di bahas di blog-blog tetangga, tapi jujur aja pertama kali saya mengetahui tentang spoiler ini dari BlogOnol dan kemudian dapat tambahan dari info dari M-Alwi. Terimakasih untuk BlogOnol dan M-Alwi atas ijin copas artikelnya(padahal belum ada ijin loh.. **tapi udah minta ijin kok** :D)...hehehe
Ya sudahlah.. ga usah dibahas masalah di ijinin apa enggak, itu urusan saya, mending kita bahas tentang spoiler ini.


Tapi ngomong-ngomong apa sih itu yang dimaksud dengan Spoiler? Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau kumpulan link, kumpulan teks, gambar, seluruh atau sebagian isi dari postingan blog dan lain-lain dengan menggunakan kombinasi kode html dan javascript. Tujuannya adalah untuk menghemat space atau ruang dalam suatu postingan atau sidebar. Keuntungan lain menggunakan Spoiler adalah bisa mengurangi waktu loading, maksudnya adalah, jika kita menggunakan spoiler pada gambar, maka blog kita tidak akan terkena beban loading yang bisa memberatkan. Spoiler juga bisa digunakan untuk menyembunyikan video agar loadingnya tidak berat.

1. Cara Membuat Spoiler Polos(biasa)

<div id="spoiler"><div>
<input name="button" 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 = 'TUTUP'; } else { this.parentNode
.parentNode.getElementsByTagName('div')['show'].style.display =
'none'; this.parentNode.parentNode.getElementsByTagName('div')
['hide'].style.display = ''; this.innerText = ''; this.value =
'LIHAT LAGI'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="contoh spoiler polos" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="text-align: justify;">
silahkan masukkan tulisan anda di sini</div>
</div>
<div id="hide">
</div>
</div>

Maka hasilnya akan seperti ini

silahkan masukkan tulisan anda di sini

2. Cara Membuat Spoiler Dengan Border Dan Background

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="CONTOH SPOILER DENGAN BORDER DAN WARNA BACKGROUND"; /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">Silahkan masukan tulisan anda disini.</p>
</div><div id="hide"></div></div></div>

Yang hasilnya akn seperti di bawah ini

Silahkan masukan tulisan anda disini.

Keterangan :
<div style=”color: #000000;= Ini untuk mengganti warna teks
background: #EBF3FB; = Ini untuk mengganti warna background
border: 1px solid #AACCEE; = Ini untuk ukuran dan warna border


3. Cara Membuat Spoiler Untuk Menyembunyikan Gambar

<div id="spoiler"><div>
<input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="CONTOH SPOILER UNTUK GAMBAR"; /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img class="aligncenter" src="http://i1195.photobucket.com/albums/aa383/tarman_wirawiri/38884_140317096001833_100000706313413_234234_2391015_n.jpg" width="300" height="280" />
</div><div id="hide"></div></div></div>

Dan hasilnya

Silahkan ganti : http://i1195.photobucket.com/albums/aa383/tarman_wirawiri/38884_140317096001833_100000706313413_234234_2391015_n.jpg dengan URL gambar yang ingin disembunyikan.
OK, untuk Spoiler yang lainnya seperti Video, daftar link dan lain-lain baik di dalam postingan atau di sidebar tinggal disesuaikan, kodenya hampir sama.
Anda bisa menempatkan button di tengah dengan menambahkan kode ini <div align=”center”> pada baris kedua.


PS: Untuk tulisan "yang berwarna merah pertama(atas)" merupakan judul, silahkan anda ganti dengan judul yang anda inginkan.
Dan untuk tulisan "yang berwarna merah kedua(bawah)" merupakan contoh konten yang disembunyikan dan silahkan anda menggantinya dengan konten anda sendiri.