Spoiler on The Blog

Bagi para blogger yang aktif dalam dunia per-foruman (Forum maksudnya) pasti sudah sering mendengar, melihat, mengetahui bahkan merasakan spoiler. Spoiler adalah script atau baris perintah kode yang dapat menampilkan tombol yang ketika di-klik akan mengeluarkan menu pulldown. Biasanya digunakan untuk menyimpan teks, gambar atau yang lainnya yang terlalu panjang yang sifatnya opsional dapat dilihat atau tidak. Trus apa fungsinya?? Fungsinya yaitu dapat menghemat bandwith atau mempercepat loading halaman blog kita karena tidak perlu meload teks atau gambar yang kita spoiler lagi. Mau tau gimana cara buatnya?

Di salah satu forum terkenal di Indonesia, yaitu Kaskus pernah ditampilin cara membuat sebuah spoiler yaitu dengan cara menyisipkan kode berikut di postingan blog anda :

<div>
<input type="button" value="Show" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>

<div style="background: #AAAAAA; margin: 10px auto;
border: 1px solid #000;
padding: 5px;">
<div style="display: none;">
ISI YANG AKAN DI SPOILER
</div>
</div>

Tulisan “Show” dan kode warna CSS bisa diganti sesuai warna themes kita. Bagian yang mau di-hidden di bagian “ISI YANG AKAN DI SPOILER” bisa diisi gambar atau tulisan.

Itu cara pertama dan agak ribet karena kita harus menyisipkan kode tersebut hehehe :D Cara kedua dan menurut saya lebih mudah (wordpress mania :D ) yaitu dengan menginstal plugin Advanced Spoiler yang dapat di download di

Show »

Mengapa lebih mudah? Karena ada tambahan tombol spoiller di menu visual add posting :) Kita tinggal klik aja tuh tombol, trus pilih animasinya dan kata-kata yang akan digunakan,  lalu tinggal klik OK hehehe

Untuk contohnya bisa dilihat diatas.. Langsung diterapkan :D

Go Go Blogging :d

keyword yang datang ke postingan ini:

cara menyisipkan spoiler (2),bagaimana menyisipkan status YM di kaskus us (1),membuat tombol spoiler yang panjang di blog (1),menyisipkan gambar

(1),menyisipkan spoiler blog (1),menyisipkan video di kaskus (1),menyisipkan ym di kaskus gimana (1),perintah membuat spoiler di wordpress (1),tombol gambar spoiler (1),Membuat Tombol spoiler lebih dari satu pada blog (1)

Related posts:

1. Pasang Box.net File Sharing