Membuat Spoiler Di Blog

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 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.

• 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 dalamsoftware 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 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>

kalau mengerti html silakan di costumize sendiri  ^-^ hehe

Artikel Terkait:

Seputar Blog

• Cara Penulisan / Kode Berbagai Style di CBOX
• Cara Membuat Banner Iklan di Blog
• Cara Membuat Banner Animasi Secara Online
• Cara Memasang Iklan di Bawah Judul Postingan Blogger / Blogspot
• Shoutmix Tidak Gratis Lagi Sekarang
• Cara Menghapus Komentar di C-BOX
• Cara Upload JavaScript Menggunakan Google Code
• Merubah Tampilan Cursor Saat Diarahkan Ke Link
• Cara Menghapus Comment Di ShoutMix
• Cara Cepat Terindeks Google dengan Ping Service
• Memasang Sistem Komentar DISQUS pada Blogspot
• JS-kit Comment: Modifikasi Sistem Komentar di Blogger
• Merubah Kotak Komentar Dengan Intensedebate
• Cara Mengganti Tulisan Posting Lama,Beranda,Posting Baru
• Membuat Google Translate Tabbed untuk MengHemat Tempat
• Cara Menyembunyikan Rolling Widget Buku Tamu
• Membuat Rolling Widget Buku Tamu (Widget Bergeser)
• Membuat Kotak Komentar Tampil Beda
• Membuat Tampilan Komentar Berbeda Untuk Pemilik Blog
• Merubah Tampilan Labels Blog
• Merubah Tampilan Skin Label Di Blogger
• Memasang Musik di Blogger
• Memasang Music Pada Background Blog
• Memasang System Tuker Link Otomatis Pada Blog
• Membuat Banner Untuk Header