Cara Memasang Tombol Spoiler di Posting Blog





Apa itu spoiler, dan bagaimana cara memasang tombol spoiler 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 tiga 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) atau teka-teki/riddles, di mana jawaban baru akan terbuka setelah tombol spoiler di-klik.

Kedua, jika kita ingin posting banyak gambar dengan ukuran besar (istilah gaul-nya BWK/bandwidth killer), namun tidak ingin gambar tersebut dimunculkan dahulu, untuk menghemat bandwidth. Jadi gambar baru akan terbuka jika pembaca memang ingin melihatnya dan meng-klik tombol spoiler.

Ketiga, jika kita ingin menulis sebuah resensi film atau buku, namun tidak ingin membuka alur cerita bagi pihak-pihak yang belum menonton film atau membaca bukunya, maka kita bisa menyembunyikan tulisan yang berisi plot ini dan menamai tombolnya dengan tulisan spoiler alert.

Adapun wujud dari tombol spoiler tersebut adalah seperti di bawah ini:

 

 

Cara memasang tombol spoiler seperti di atas sangatlah mudah, kita 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>

Lanjutan isi artikel

 

Kode di atas bisa digunakan baik untuk postingan pada Blogger/Blogspot maupun pada WordPress. Perlu diingat bahwa kode perlu dimasukkan di area HTML (Blogger) atau Text (WordPress) pada kolom posting, bukan pada area Compose (Blogger) atau Visual (WordPress).

 

Customization:

  • Jika anda ingin memasang tombol spoiler lebih dari satu pada halaman yang sama, anda perlu menamainya dengan ID yang berbeda-beda. Ganti tulisan spoiler¬†pada kode di atas 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 semua kode yang terletak 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 lokasi gambar anda.

Demikianlah cara memasang tombol spoiler di dalam postingan blog Blogger dan WordPress. Semoga bermanfaat.

 

Artikel Menarik Lainnya:

Tags: