Minggu, 14 November 2010

Cara Membuat Tombol Hide Dan Show


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 Tips n Trick. (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)


Maka akan terlihat seperti ini,

ISI NYA (Terserah anda)


Ataupun bisa seperti ini,

JUDUL SPOILER

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 sesuai keinginan anda. Tapi jangan lupa juga untuk mengganti ukuran lebar nya, Misal: width:100px;


nb: jangan ngebuka compose biar spoilernya berhasil, jadi ngeditnya di edit HTML aja ga usah ngebuka compose

Tidak ada komentar:

Posting Komentar