Cara Membuat Spoiler Show / Hide di postingan blog

Trik simple, namun sering dipakai dalam aktifitas blog yang menyertakan banyak gambar dan penjelasan. Cara ini mudah  karena sering juga digunakan dalam postingan saya seperti berikut

                         

Benny & Mice Full Story

Masukkan kode dibawah ini ke postingan anda, jangan lupa copy paste ke format HTML, dan preview unuk melihat hasil, kemudian save, its so easy

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>

<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"></div>

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

silahkan tulis disni

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

- Dan hasilnya akan tampak seperti dibawah ini,

                          Klik Show Untuk Melihat

silahkan tulis disni

Ganti tulisan silahkan tulis disni sesuai dengan keinginan anda. ini merupakan teknik dasarnya dan bisa sobat eksplorasi lebarnya dengan mengganti angka pada width: 60px dan besar tulisan pada font-size: 10px;" [ Lihat baris kedua sebelah kanan kode diatas]

selamat berkreasi ^_^

Ranking: 5