Beranda » Tutorial Blog » Cara Membuat Spoiler di Blog

Cara Membuat Spoiler di Blog

Artikel kali ini membahas tentang Cara Membuat Spoiler di Blog. Wah, kalo anak-anak forum pasti tau spoiler itu. Spoiler itu berguna untuk menyembunyikan sebagian atau seluruh postingan, untuk menghemat space halaman posting. Spoiler bisa juga untuk menyembunyikan teks, gambar, kode HTML, dll.

Untuk membuat spoiler pada postingan, ubahlah ke mode HTML, copy kode dibawah ini.

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler teks</b></i>: <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler
</div></div></div>

Ini contoh spoiler yang berhasil dibuat :

Contoh spoiler teks:

Kalo ingin menggunakan gambar, maka ganti teks Isi Spoiler dengan kode gambar.

Contoh kode gambar :

<div style="text-align: center;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOdmiuYeVPpneAs_b9RMK6U65Oc957oisonXoECRMg93Gz0GqgRnvUmD0W2SWw0fnqfTOi6Yn1U8sdyt4b1Cfo-fBptaZ1Ddkzy6lOxLz3JYjEImpsJUx6xH7Fj4a-KtNJ0YAgeQ4JmAQ/s1600/images.jpg"

</div>

Maka kode spoiler diatas menjadi seperti ini :

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler gambar</b></i>: <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOdmiuYeVPpneAs_b9RMK6U65Oc957oisonXoECRMg93Gz0GqgRnvUmD0W2SWw0fnqfTOi6Yn1U8sdyt4b1Cfo-fBptaZ1Ddkzy6lOxLz3JYjEImpsJUx6xH7Fj4a-KtNJ0YAgeQ4JmAQ/s1600/images.jpg"
</div>
</div></div></div>

Maka hasilnya seperti ini :

Contoh spoiler gambar:

Catatan :
Huruf yang berwarna biru tua anda ganti dengan judul spoiler yang anda inginkan dan yang berwarna merah bisa anda ganti dengan teks maupun kode gambar seperti cara diatas.

Sekian dulu nih artikel tentang Cara Membuat Spoiler di Blog, semoga bermanfaat bagi kita semua.