Cara Membuat Tombol Hide Dan Show

Pada postingan sebelumnya saya membahas tentang cara membuat related post di blogger, bila sobat blogger tertarik membacanya, silakan klik cara membuat related post.

Namun pada kesempatan kali ini saya akan mencoba berbagi tips blogger tentang cara membuat tombol show dan hide seperti punya saya, yang saya pergunakan untuk membuat category. (lihat disebelah kiri). Bagaiamana??? tertarik??
Oke kita langsung aja,
Cara membuatnya pun sangat mudah, anda hanya perlu mengcopy-paste script yang saya berikan, kemudian edit sesuai dengan keperluan anda.

<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;">

ISI NYA (Terserah anda)

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

Maka akan terlihat seperti ini,

JUDUL SPOILER

ISI NYA (Terserah anda)

Ataupun bisa seperti ini,

ISI NYA (Terserah anda)

Kalau anda menginginkan tampilan seperti ini, anda hanya perlu menghilangkan kode <i><b><small>JUDUL SPOILER</small></b></i> lalu anda ganti kata show dan hide sesuai keinginan anda. Tapi jangan lupa juga untuk mengganti ukuran lebar nya, Misal: width:100px;

Selamat Mencoba.