Cara Membuat Spoiler di Blog

Sebelum masuk bahasan kita bahas sedikit tentang Spoiler. Spoiler (Beberaran dalam bahasa Indonesia) yaitu tulisan atau keterangan mengenai suatu cerita, yang membeberkan jalan cerita tersebut. Membaca Spoiler 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, beberan disembunyikan dengan cara tertentu, sehingga hanya terbaca oleh yang ingin melihat beberan tersebut.

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat 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 Anda sudah sering lihat Spoiler 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.

• Spoiler Forum misalnya KASKUS:

[spoiler=judul spoiler]isi spoiler[/spoiler]Ganti tulisan yang berwarna hijau sesuai judul dan isi spoiler yang anda kehendaki.

• 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;"><br /><div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Pesan Cerita</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"/><br /></div><br /><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><br /><div style="display: none;"><br />................. Isi........<br /></div></div></div></div>

Kode HTML diatas akan memberikan hasil seperti dibawah ini:

For Spoiler

................. Isi........

Click to Print This Page

Artikel terkait :

Anda sedang membaca artikel Cara Membuat Spoiler di Blog dengan url http://blog-abdiezs.blogspot.com/2011/06/cara-membuat-spoiler-di-blog.html . Silahkan baca artikel lainnya di Abdiezs Blog . Terima Kasih.

About Abdiezs
Tentang saya follow di Twitter , Google+ and blog . Respon ke Cara Membuat Spoiler di Blog Silahkan Anda berkomentar mengenai artikel yang telah anda baca, gunakan bahasa yang baik, sopan, dan sesuai etika berkomentar. Dapat berupa pertanyaan, masukan, pendapat, dan Tidak SPAM. Hindari Duplikat komentar. Terimakasih.