Apa itu Spoiler?

Saya Blogger Indonesia Spoiler adalah salah satu cara untuk menyembunyikan sebagian isi dari postingan yang kita buat. Spoiler juga bermanfaat agar konten posting yang berat seperti gambar (dalam ukuran besar) dan video [embed dari Youtube] tidak dimuat secara langsung saat halaman dibuka sebelum menekan tombol “show”. Dengan adanya spoiler dapat membantu mengurangi waktu loading sebuah situs dan memberikan opsi kepada pembaca blog untuk membuka atau tidak isi spoiler tersebut.

Jika anda sering berkunjung ke kaskus, anda akan sering melihat tombol Spoiler disana untuk nyembunyikan gambar, link, video ataupun konten lainnya. Untuk forum dengan engine vBuletin, disana sudah tersedia kode utama Spoiler sehingga pengguna cukup mengetikan kode yang sederhana di postingan yang dibuat. Kode Spoiler di Forum seperti Kaskus adalah sbb:

• Spoiler Forum, contoh Kaskus:

Spoiler di Kaskus [spoiler=JUDUL] ISI SPOILER [/spoiler]
Ganti tulisan yang berwarna hijau sesuai judul dan isi spoiler yang dikehendaki dan bisa di posting ke Kaskus atau Forum vBuletin lainnya. Lalu bagaimana cara membuat Spoiler untuk website pribadi ataupun Blog yang kita miliki?

• Spoiler untuk blog/web:

Untuk blog seperti Blogger.com tidak memiliki kode script internal untuk membuat Spoiler seperti halnya di vBulettin. Namun kita bisa mengetik manual kode HTML Spoiler ke source code postingan di Blogger. Caranya, buat postingan kemudian pilih metode pengeditan dengan model HTML dan copy-paste code Spoiler dibawah ini.
Berikut kode yang bisa digunakan dalam membuat spoiler di blog :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">JUDUL SPOILER…</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

ISI SPOILER

</div></div></div></div>


Setelah selesai, silahkan Publish/Terbitkan postingan tersebut, maka kasilnya akan seperti berikut ini.

Judul Spoiler ...
Isi Spoiler ... Bla bla bla, Foto, Video, etc.

Creative Commons License You may share this document under Creative Commons License – Terima kasih telah membaca tulisan ini. © 2011 Ari Sulistiono, Indonesian Electrical Engineer.