Cara Membuat Tombol Hide dan Show pada Blogger

Yak para sobat blogger sudah lama saya tidak posting, kali ini saya ingin posting tentang tips dan trik tentang mempercantik blog kita agar pengunjung tertarik. Pertama saya akan membahas tentang bagaimana cara membuat tombol Hide dan Show pada blog.

Contohnya seperti di bawah ini. dan langsung saja Copy-paste kode dibawah ini :

<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER</small></b></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"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

"dan disini isi yang akan sobat kehendaki"

Untuk width:100px; bisa sobat ubah sesuai keinginan sobat sendiri

Klik show untuk melihat

Kalau anda menginginkan tampilan seperti ini, anda hanya perlu menghilangkan kode JUDUL SPOILER lalu anda ganti kata show dan hide sesuai keinginan anda.

Selamat mencoba sobat blogger