Cara Memasang Spoiler pada Blog


Spoiler pada Blogspot

Cara Memasang Spoiler pada Blog - Apa itu spoiler? dan bagaimana cara memasang tombol spoiler pada blog anda?

Bagi rekan-rekan yang gemar dengan aktivitas di forum-forum internet sering melihat kata Spoiler . Ya fitur ini memang untuk menyembunyikan bagian tertentu dari sebuah tulisan atau bahkan sebuah gambar dan jika tombol spoiler dklik maka akan terbuka.

Ada tiga contoh situasi yang boleh dan cocok diterapkan dengan Spoiler ini

1. Untuk situs atau blog yang banyak berisi pertanyaan dan jawaban (Q&A), seperti situs akademis, Landing page produk(tools, fisik), dimana jawaban baru terbuka jika tombol spoiler diklik.
2. Jika kita ingin posting banyak gambar dengan ukuran besar, namun tidak ingin gambar tersebut dimunculkan terlebih dahulu untuk menghemat bandwidth. Jadi gambar akan terbuka setelah mengklik tombol spoiler
3. 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.

Adapun contoh dari tombol spoiler sederhana adalah seperti dibawah ini




Untuk membuatnya cukup mudah, yang terpenting adalah anda memastikan membuat tulisan atau artikel dengan mode HTML jangan pilih Compose pada blogger.

Untuk Wordpress jangan gunakan mode visual tetapi gunakan mode teks(code HTML). Untuk penerapananya silahakan ikuti kode dibawah ini


<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 SPOILER YANG HENDAK DISEMBUNYIKAN
</div>


Kode diatas bisa digunakan baik untuk postingan pada blogger atau blogspot maupun pada web berbasis Wordpress lho. Perlu diingat bahwa kode perlu dimasukan ke area HTML (blogger) atau Text pada Wordpress pada kolom posting, BUKAN pada area Compose pada Blogger atau Visual pada Wordpress.

Pengaturan Tambahan:

  • Jika anda ingin memasang tombol spoiler lebih dari satu pada halaman yang sama, anda perlu menamainya dengan ID yang berbeda-beda. Ganti tulisan spoiler dengan ID unik; spoiler1, spoiler2
  • Spoiler Contoh adalah teks yang muncul ditombol. Bisa anda ganti dengan tulisan lain
  • Tombol bisa anda ganti dengan gambar yang anda inginkan. Caranya dengan mengganti semua kode yang terletak diatas </br> pada skrip code diatas. Berikut kodenya


<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'}"/>

Dimana IMAGE_URL adalah direct link ke lokasi gambar anda. Ok sobat, semoga artikel tentang Cara Memasang Spoiler pada Blog ini dapat bermanfaat dan dapat anda terapakan pada website anda. Terimakasih :)

0 Response to "Cara Memasang Spoiler pada Blog"

Post a Comment

Ditunggu komentarnya ya? Semoga sajian dari situs ini bermanfaat dan bisa dishare ke lainnya :)