Cara Membuat Tombol Spoiler / Show&Hide Di Blog spoiler

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 • Spoiler untuk blog/web: Menyembunyikan konten tertentu dari sebuah halaman blog/website diperlukan untuk menghemat space.

Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Begitupun dalam software forum semacam vBulletin, Spoiler pasti banyak digunakan.

Berikut kode yang bisa digunakan dalam membuat spoiler di blog :

<div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight:bold;">Keterangan</span></i><input value="Buka" 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"/></div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">
isi spoiler taruh disini..
</div></div></div></div>

Keterangan

isi spoiler taruh disini..

Silahkan edit Kata-kata yang berwarna hijau diatas..! Kode HTML diatas akan memberikan hasil seperti dibawah ini: Keterangan Kalau Sudah mengerti silakan Dikembangkan sendiri ... Salam Blogger