Membuat Efek Spoiler Pada Blog

Jika anda sering pergi ke Kakus…….ehhh salah maksud saya Kaskus Gan ^_^ atau mungkin anda adalah Kaskuser sejati, maka saya yakin anda sudah seringkali lihat tampilan Spoiler dan manfaatnya.

Intinya, Spoiler merupakan suatu tombol yang segaja dibuat untuk menyembunyikan dan menampilkan entah itu gambar, teks, link, dan sebagainya. Berikut ini beberapa manfaat dari Spoiler :

• Membuat orang penasaran apa yang ada di dalam Spoiler tersebut
• Jika pada postingan kita banyak sekali Gambarnya maka gambar-gambar tersebut bisa kita buatkan Spoiler agar Loading blog lebih cepat.
• Menghemat tempat
• Postingan kita bisa tampil Unik dan keren
• Dan masih banyak lagi manfaat dari Spoiler.

Baiklah, kita langsung saja ke cara pembuatan Spoiler pada postingan blog :

Silakan anda Copy dan gunakan script berikut:

<div id="spoiler" style="display:none">Konten Yang Disembunyikan<br /> </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.

Oh ya, 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.

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



Semoga Bermanfaat,

Tetap Semangat!!

Posted in: Tutorial Blog