Ada tiga teladan situasi yang cocok untuk menerapkan teknik spoiler ini.
1. untuk situs atau blog yang banyak berisi pertanyaan dan tanggapan (Q&A), menyerupai situs akademis (pelajaran) atau teka-teki, di mana tanggapan gres akan terbuka sesudah tombol spoiler di klik.
2. jikalau kita ingin posting banyak gambar dengan ukuran besar (istilah gaul-nya BWK/bandwidth killer), namun tidak ingin gambar tersebut dimunculkan dahulu, untuk menghemat bandwidth. Makara gambar gres akan terbuka jikalau pembaca memang ingin melihatnya dan meng-klik tombol spoiler.
3. jikalau kita ingin menulis sebuah resensi film atau buku, namun tidak ingin membuka alur dongeng bagi pihak-pihak yang belum menonton film atau membaca bukunya, maka kita dapat menyembunyikan goresan pena yang berisi plot ini dan menamai tombolnya dengan goresan pena spoiler alert.
Adapun teladan dari tombol spoiler tersebut yaitu menyerupai di bawah ini :
Kode markup yang diharapkan :
<button title="Inilah Cara Memasang Spoiler di Blog" 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 SPOILER YANG HENDAK DISEMBUNYIKAN </div>
Kode di atas dapat dipakai baik untuk postingan pada Blogger/Blogspot maupun pada WordPress. Perlu diingat bahwa aba-aba perlu dimasukkan di area HTML (Blogger) atau Text (WordPress) pada kolom posting, bukan pada area Compose (Blogger) atau Visual (WordPress).
Setelan :
- Jika anda ingin memasang tombol spoiler lebih dari satu pada halaman yang sama, anda perlu menamainya dengan ID yang berbeda-beda. Ganti goresan pena spoiler pada aba-aba di atas dengan ID unik, contohnya spoiler01, spoiler02, dst…
- Spoiler yaitu teks yang muncul di tombol. Bisa anda ganti dengan goresan pena lain sesuka hati.
- Tombol dapat anda ganti dengan gambar yang anda inginkan. Caranya ganti semua aba-aba yang terletak di atas <br/> dengan :
<img src="IMAGE_URL" title="Inilah Cara Memasang Spoiler di Blog" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"/>
di mana IMAGE_URL yaitu direct link ke lokasi gambar anda.
Demikianlah Cara Memasang Spoiler di Blog Blogger dan WordPress. Semoga bermanfaat.
Post a Comment
Post a Comment