Spoiler 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.
Bisa dibayangkan jika ditampilkan apa adanya tanpa spoiler
maka akan memakan space dan keseluruhan postingan akan sangat panjang
dan merusak tampilan blog.
Menyembunyikan
konten tertentu dari sebuah halaman blog/website diperlukan untuk
menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan
mudah menampilkannya. Begitupun dalam software forum semacam vBulletin,
Spoiler pasti banyak digunakan.
Berikut kode yang biasa Saya gunakan dalam membuat spoiler di blog :
Berikut kode yang biasa Saya gunakan dalam membuat spoiler di blog :
<br /><div><div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Buka Disini </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>
Jadi, tinggal copas aja, lalu ganti 'Klik Disini' dengan judul spoiler Sodara, dan 'isi spoiler :)', tentunya dengan isi spoiler Saudara. Contoh penggunaan kode diatas, hasilnya akan seperti ini :
Buka Disini
