Cara Mudah Memasang Spoiler di Blog Dengan HTML

Cara Mudah Memasang Spoiler di Blog Dengan HTML - Pada kesempatan kali ini saya akan membahas seputar HTML yaitu bagaimana cara memasang spoiler di blog dengan kode HTML , tentu disini juga kita akan berkaitan dengan HTML . Bagi anda yang suka beraktivitas di forum-forum internet seperti KASKUS pasti sudah familiar dengan spoiler. Fitur ini berfungsi untuk menyembunyikan bagian tertentu dari sebuah tulisan, bisa juga berisi gambar, yang baru akan muncul setelah tombol spoiler di klik.

https://tornesia.blogspot.com/2017/11/cara-mudah-memasang-spoiler-di-blog.html

Disini ada 3 contoh situasi yang cocok untuk menerapkan teknik spoiler ini sebagai berikut.

1. Untuk situs WEB atau BLOG yang berisi pertanyaan dan jawaban Q&A, seperti situs akademis (pelajaran) atau teka-teki, dimana jawaban baru akan terbuka tombol spoiler di klik.

2. Jika anda ingin memposting banyak gambar dengan ukuran besar dalam istilahnya BWK/bandwidth killer), namun tidak ingin gambar tersebut munculkan terlebih dahulu, untuk menghemat bandwidth. Jadi gambar baru akan terbuka jika pembaca memang ingin melihatnya dan meng-klik tombol spoiler ini.

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

Nah itulah 3 contoh situasi yang cocok untuk menerapkan teknik spoiler, selanjutnya kita langsung ke tutorial bagaimana cara memasang spoiler di blog dengan HTML sebagai berikut.

Kode HTML :

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

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

Untuk demo script diatas anda bisa mengklik tombol dibawah ini.

Untuk setelan atau option bisa diikuti langkah berikut ini.

Jika anda ingin memasang tombol spoiler lebih dari satu pada halaman yang sama, anda perlu menamainnya dengan ID yang berbeda-beda. Ganti tulisan spoiler pada kode diatas dengan ID unik, misalnya spoiler01, spoiler02, spoiler03, dan seterusnya.
Spoiler merupakan teks yang muncul di tombol. Bisa anda ganti dengan tulisan lain sesuai selera anda.
Tombol bisa anda ganti dengan gambar yang anda inginkan. Caranya ganti semua kode yang terletak diatas. </br > dengan :

 <img src="URL Gambar Anda" 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'}"/>

Terakhir ganti URL Gambar Anda, ganti dengan gambar anda.

Nah mungkin demikian artikel tentang HTML bagaimana cara memasang/membuat spoiler di blog dengan HTML, semoga apa yang saya sampaikan ini dapat bermanfaat bagi anda dan menjadi bahan pembelajaran. Apabila anda masih bingung dengan tutorial diatas silahkan bertanya lewat berkomentar dibawah postingan ini.