Apa itu spoiler, dan bagaimana cara memasangnya di dalam postingan blog? Bagi anda yang gemar beraktifitas di forum-forum Internet seperti Kaskus atau Indowebster pasti sudah familiar dengan spoiler. Fitur ini berfungsi untuk menyembunyikan bagian tertentu dari tulisan (bisa juga berisi gambar), yang baru akan muncul setelah tombol spoiler di-klik.
Ada dua contoh situasi yang cocok untuk menerapkan teknik spoiler ini. Pertama, untuk situs atau blog yang banyak berisi pertanyaan dan jawaban (Q&A), seperti situs akademis (pelajaran) dan hard riddles. Kedua, jika anda ingin posting banyak gambar (istilah gaul-nya bandwidth killer), namun tidak ingin gambar tersebut dimunculkan dahulu, untuk menghemat bandwidth. Jadi gambar baru akan muncul jika pembaca memang ingin melihatnya dan meng-klik tombol spoiler.
Adapun wujud dari tombol spoiler tersebut adalah seperti di bawah ini:
Ada dua contoh situasi yang cocok untuk menerapkan teknik spoiler ini. Pertama, untuk situs atau blog yang banyak berisi pertanyaan dan jawaban (Q&A), seperti situs akademis (pelajaran) dan hard riddles. Kedua, jika anda ingin posting banyak gambar (istilah gaul-nya bandwidth killer), namun tidak ingin gambar tersebut dimunculkan dahulu, untuk menghemat bandwidth. Jadi gambar baru akan muncul jika pembaca memang ingin melihatnya dan meng-klik tombol spoiler.
Adapun wujud dari tombol spoiler tersebut adalah seperti di bawah ini:
ISI YANG HENDAK DISEMBUNYIKAN
Cara membuat tombol Spoiler di atas sangatlah mudah, anda hanya perlu menyisipkan beberapa baris javascript di dalam postingan blog. Berikut ini adalah kodenya:
Cara membuat tombol Spoiler di atas sangatlah mudah, anda hanya perlu menyisipkan beberapa baris javascript di dalam postingan blog. Berikut ini adalah kodenya:
Isi Artikel
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Spoiler</button><br/><div id="spoiler" style="display:none">
ISI YANG HENDAK DISEMBUNYIKAN
</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Spoiler</button><br/><div id="spoiler" style="display:none">
ISI YANG HENDAK DISEMBUNYIKAN
</div>
Kode di atas bisa digunakan baik untuk postingan Blogger/Blogspot maupun WordPress. Perlu diingat bahwa kode perlu dimasukkan di area HTML, bukan pada Compose/Visual.
Customization:
- Jika anda ingin memasang beberapa spolier dalam satu halaman, anda perlu menamainya dengan ID yang berbeda-beda. Ganti tulisan spoiler dengan ID unik, misalnya spoiler01, spoiler02, dst…
- Spoiler adalah teks yang muncul di tombol. Bisa anda ganti dengan tulisan lain sesuka hati.
- Tombol bisa anda ganti dengan gambar yang anda inginkan. Caranya ganti kode di atas <br/> dengan:
<img src="IMAGE_URL" title="Click to show/hide content" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"/>
di mana IMAGE_URL adalah direct link ke gambar anda.
Demikianlah cara untuk memasang tombol Spoiler di dalam postingan blog Blogge
selamat mencoba....
