Cara membuat spoiler di 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.

Berikut adalah script yang digunakan untuk membuat spoiler di blog :

<br /> <br /> <div><div style="margin: 5px;"><br /> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"><b><span style="color: blue;"><b>Judul Spoiler</b></span></b> </span></i><input value="Show" 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"/><br /> </div><br /> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><br /> <div style="display: none;"><br /> <br /> <b><span style="color: blue;">Isi spoiler...</span></b><br /> <br /> </div></div></div></div><br /> <br />

Kode HTML di atas akan memberikan hasil seperti di bawah ini :

Judul Spoiler

Isi spoiler...

Selamat mencoba! Good luck ya! ^_^

Posted in: Tutorial Blogging