Cara Membuat Tombol Spoiler di Blog

Para blogger yang sudah pernah berkunjung ke Kaskus.us pasti sudah sering melihat tombol Spoiler. Spoiler adalah wahana agar gambar di posting kita bisa tampil setelah di klik tombol show.


Tips dan trik membuat spoiler ini sebenarnya sudah banyak yang posting dan share. Akan tetapi, tidak ada salahnya juga jika saya ikut share tentang spoiler dan sedikit tentang kegunaannya. Spoiler dibuat dengan menggunakan javascript button. Sedangkan untuk menyembunyikannnya digunakan properti CSS display, dalam hal ini, "display:none;". 

Pada posting blog, Spoiler berguna untuk memperpendek teks atau menyembunyikan gambar yang besar dan panjang, sehingga tidak memakan tempat. Atau bahkan untuk menyembunyikan kejutan bagi pengunjung, (maka sering disebut pula sebagai 'peek-a-boo' atau indonesianya mah 'ci-luk-ba', hehe).

Contoh spoiler :

Testing

Cara membuat tombol spoiler di blog :

1. Copy dan gunakan script berikut:

<div id="spoiler" style="display:none"> 
Konten Yang Disembunyikan
</div> 
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Buka/Tutup</button>

Kostumisasi spoiler: 

- Ganti Konten Yang Disembunyikan dengan konten (text, url, url gambar, script dll) yang ingin disembunyikan.

- Ganti title Klik untuk melihat/menyembunyikan dengan title semau kamu. Title berfungsi memberi informasi ketika mouse di hover di atas tombol spoiler.

- Ganti Buka/Tutup dengan teks sesuai keinginan, teks tersebut akan menjadi perintah yang terlihat pada tombol spoiler.

2. Untuk membuat spoiler di badan posting, buat spoiler melalui menu Edit HTML, letaknya dibagian pojok kanan atas kotak posting, semua editing dilakukan pada menu tersebut, jika tidak maka script tidak akan bekerja.

3. Jika ingin membuatnya di widget, pilih menu "HTML/Javascript".


Selesai . . . selamat mencoba!
dikutip dari sini