Cara Buat Spoiler (Show/Hide) pada Blog

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler. (berlaku juga untuk web)

Untuk lebih mudah saya beri contoh seperti dibawah ini :

Dan spoiler ini bisa ditampilkan pada sidebar maupun di postingan. Ada yang tertarik untuk membuatnya, caranya mudah kok . . . silahkan coba langkah dibawah ini :

Untuk Sidebar :

Log-in dulu di account blog anda
Pada dashboar, pilih Layouts/Tata Letak
Klik Elemen Halaman dan pilih Add HTML/Script
Lalu paste kode dibawah ini :

<div><div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

isi spoiler... (bisa image/script/link/ato widget)

</div></div></div></div>

Untuk code bewarna merah, bisa anda ganti sesuai keinginan . .

Kayaknya cukup sampai disini, kalau ada pertanyaan silahkan komen aja dibawah . . .