Membuat Spoiler Yang Menyembunyikan Content

Dalam dunia permobilan, spoiler sebenarnya merupakan perangkat yang berhubungan dengan Aerodynamic kendaraan. Perangkat ini dirancang dengan tujuan utama untuk mengurangi efek negative dari aliran udara yang bergerak pada saat mobil berjalan. Sehingga mobil tetap melekat di aspal setika melaju sangat kencang dengan kata lain mengoptimalkan down force kendaraan.
Eits.. tapi bukan itu yang dibahas sekarang melainkan spolier dalam media Internet.

Spoiler dalam dunial perInternetan adalah tulisan atau keterangan mengenai suatu cerita, yang membeberkan jalan cerita tersebut. Membaca spolier dari suatu cerita dapat menyebabkan berkurangnya kesenangan membaca cerita itu, karena kesenangan membaca sebuah cerita biasanya tergantung kepada dramatisasi atau ketegangan yang ditimbulkan oleh cerita tersebut. Biasanya dalam media massa maupun Internet, spoiler disembunyikan dengan cara tertentu, sehingga hanya terbaca oleh yang ingin melihat spoiler tersebut.

bukan ini

atau

bukan yang ini juga

tapi yang ini

Contoh Spoiler

Nah, yang ini baru bener...

Bagi yang berminat ini cara pasang spoiler pada postingan blog atau website bukanlah hal yang sulit, karena kita tinggal memasukan isi content ke dalam kode HTML dan menaruhnya dalam content posting, sedangkan yang sulit itu adalah membuat kode-kode HTML-nya.

Adapun kode HTML yang untuk membuat spoiler pada posting blog/website adalah sebagai berikut:

Spoiler membuat spoiler

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;"> Contoh Spoiler</span><input value=" Open " style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" 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 = ' Close '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Open '; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
"disinilah tempat untuk menaruh content dalam spoiler"
</div></div></div>
</div>

Keterangan:

1. Teks warna Biru adalah Judul Content dan boleh diganti sesuai selera, namun jika tidak ingin menampilkan judul content pada spoiler, silahkan dihapus saja dan nilai margin saya kasih warna biru silahkan diganti menjadi 0 (nol).
2. Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera.
3. Teks warna Hijau adalah tempat menaruh isi content postingan.

Selamat mencoba dan sumber: disini.

---