Cara Membuat Spoiler di Blogger/Blogspot

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;". Fungsinya ada banyak sekali, diantaranya untuk memperpendek teks atau gambar yang sangat besar/panjang dan memakan space halaman atau untuk menyembunyikan kejutan bagi pengunjung (maka seringkali disebut pula sebagai "peek-a-boo", Indonesianya kurang lebih, "ci-luk-ba!", hehe)

Pada posting blog, spoiler dapat digunakan untuk memperpendek panjang halaman sementara sebelum di-klik oleh pengunjung, sehingga tampak tidak ruwet.

Cara membuat dan memasang spoiler di Blogger/Blogspot:

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 sekehendak anda. 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".

Enjoy your Peek-A-Boo Spoiler!