Cara Membuat Spoiler di Blog

Spoiler adalah posting konten (teks, foto atau video) tersembunyi yang bisa dilihat jika pembaca mengklik tombolnya. Pembaca juga bisa menyembunyikan kembali postingannya dengan menekan kembali tombolnya. 

Sementara fungsi spoiler itu sendiri adalah untuk menghemat space (tinggi) posting, mempercepat loading halaman, dan dapat menghemat kuota pembaca.

Untuk bisa membuat spoiler pada posting blog, harus digunakan kode khusus, yang cukup panjang. Namun begitu, kode ini tidak akan memberatkan blog, bahkan mempercepat proses loading. 

Spoiler sering kali dipasang pada sebuah halaman posting, namun ada juga yang memasukkan nya ke dalam sidebar atau footer untuk menyembunyikan widget tertentu. 

Pada kesempatan kali ini kita akan praktekan cara membuat spoiler dengan isi tulisan dan spoiler dengan isi gambar di posting blogspot.

Berikut ini adalah langkah-langkah yang bisa sobat tempuh kalau ingin membuat spoiler pada posting blog.

1. Membuat spoiler dengan isi teks

Membuat spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks

<div style="margin-bottom: 2px;">Klik Show Untuk Membuka Spoiler

<div style="margin-top: 5px; text-align: center;"><input value=" Show" style="margin-top: 5px; 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"> </div>

<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Isi Spoiler teks atau kode script (gambar atau video) di sini </div></div></div>

Catatan : 

1. Tempatkan isi teks/image/vidio pada tek berwarna biru
2. Ganti tek berwarna merah (sebagai judul dan tombol buka)sesuai keinginan anda

Hasilnya seperti ini :

Isi Spoiler teks atau kode script (gambar atau video) di sini

2. Memasang spoiler dengan isi image atau gambar

Berikut kode spoiler untuk isi gambar:

<div style="margin: 5px 20px 20px;">

<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Show" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">

</div>

<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">

<div style="display: none;">

Isi Spoiler teks atau kode script (gambar atau video) di sini

 <br>

</div>

</div>

</div>

Hasilnya seperti ini:

Judul Spoiler:

Catatan : 

1. Tempatkan isi teks/image/vidio pada tek berwarna biru untuk gambar ditambahkan (<img src="link gambar")
2. Ganti tek berwarna merah (sebagai judul dan tombol buka)sesuai keinginan anda 

Ternyata cukup mudah bukan membuat spoiler di postingan blog. Silakan anda praktekan sendiri. Semoga bermanfaat Terimakasih atas kunjungannya.