Saturday, 28 January 2012

Cara 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 dulu sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilihan kepada pembaca blog untuk membuka atau tidak isi spoiler.


Agan 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]

Spoiler untuk blog/web:

Menyembunyikan konten tertentu dari sebuah halaman blog/websitediperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Berikut kode yang bisa digunakan dalam membuat spoiler di blog :

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

Hapus "tentang Blo bla bla" dan ganti dengan judul yang anda inginkan misal lihat juga, klik, dsb. "Isi spoiler" diganti dengan url gambar, musik atau video yang agan inginkan.

Contoh java script di atas :

Tentang bla..bla.bla..
isi spoiler...

Selamat mencoba gan...
___________________________________________________________

1 comment:

Related Posts Plugin for WordPress, Blogger...
One Piece Logo One Piece Logo Blacy Smiley - Exciting