Membuat Spoiler Untuk Blogspot

Spoiler adalah nama sebuah trik untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita yang sering dipakai di forum-forum. Spoiler juga bermanfaat meringankan loading blog agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler. spoiler juga digunakan untuk membuat orang penasaran.

Anda sudah sering lihat Spoiler di kaskus atau forum-forum untuk nyembunyikan gambar, link dan konten lainnya. Spoiler ada dua yaitu untuk forum misalnya kaskus dan satunya lagi untuk dipergunakan di blog/web. Keduanya memiliki kode yang berbeda.

• Cara Membuat Spoiler Forum misalnya KASKUS:

[spoiler=judul spoiler]isi spoiler[/spoiler]

Ganti tulisan tebal sesuai judul dan isi spoiler yang anda kehendaki.

• Cara membuat spoiler untuk blog/web:

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 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;">Tentang bla..bla.bla.. </span></i><input 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'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

isi spoiler...

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

Kode HTML diatas akan memberikan hasil seperti dibawah ini ( contoh spoiler untuk blogspot). anda tinggal mengganti pada tulisan yang di bold sesuai dengan selera.

Tentang bla..bla.bla..

isi spoiler...

Sumber : hxxp://forantum.blogspot.com/2010/02/cara-membuat-spoiler-di-blog.html