Cara Membuat Spoiler di Blog

Baca Juga

Cara Membuat Beberan (Spoiler) di Blog. Spoiler adalah tulisan atau keterangan mengenai suatu cerita, yang membeberkan jalan cerita tersebut. Bahasa Indonesianya adalah "beberan" (Wikipedia).

Pengguna Kaskus tentu tidak asing lagi dengan yang namanya spoiler yang biasa dipakai untuk "menyembunyikan" gambar atau tulisan.

Gambar/tulisan/kode tersebut baru bisa dilihat, tampil, jika tombol Spoiler itu diklik.

Asal kata Spoiler adalah "spoil" (Inggris) yang artinya merusak atau mengganggu. Maka, spoiler artinya "perusak" atau "pengganggu".

Itu menurut bahasa. Menurut istilah atau pengertian praktisnya, spoiler adalah keterangan tambahan dari suatu tulisan atau cerita dalam buku, majalah, dll., semacam footnote (catatan kaki).

Fungsi Spoiler
Di blog atau situs web, juga forum-forum online, fungsi spoiler adalah mempercepat loading atau tampilan, apalagi jika ada gambar atau kode yang bisa membebani tampilan.

Bisa juga spoiler itu untuk menipu (jangan deh!). Misalnya, disebutkan gambar Rinada lagi "anu", eh.. pas diklik ternyata gambar Sony Wakwaw, misalnya. 

Cara Membuat Spoiler

Gampang. Kodenya sudah banyak yang share tuh. Googling aja "kode spoiler untuk blog". Kita tinggal masukkan kode ini di posting blog di mode HTML (bukan mode Compose):

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Lihat" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;">Tampilan Spoiler untuk Menyembunyikan Teks atau Kode</div> </div> </div>

Hasilnya seperti ini:

Tampilan Spoiler untuk Menyembunyikan Teks

CARA MEMBUAT SPOILER GAMBAR, IMAGE, atau FOTO
Kalo untuk spoiler gambar, maka tinggal ganti kode teks tadi dengan kode <img class="aligncenter" src"LINK GAMBAR" alt="Nama Gambar" width"400" height="300"/>

Ini kodenya. Ganti link gambar yang berwara merah dengan link gambar "kepunyaan" Anda:

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;"><img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNIcpbkcMkh8mCjaicll90XrmvPpD04n4PM9MTBuBPFsWBb-12ew4rPOT3OftSl3G7eSxCY77XCYv_LzYS-PKiKTqUkczbz3vQqTt_hYs3kBXfgOdLgLuUx1kY4EXTpBxUkYzdwWAR9Hj/w640-h456-no/" alt="Polwan Cantik" width="410" height="300" /></div> </div> </div>

Hasilnya akan seperti ini:

Kata "Lihat" dan "Show" bisa diganti dengan "Spoiler" atau kata lainnya yang lebih menarik dan unik.

Demikian cara membuat Spoiler di Blog.*