Cara Membuat Tombol Hideshow di blogspot

Tombol Hide dan show ini sangat berguna sekali untuk memangkas ruang halaman, terutama untuk penempatan gambar atau hal-hal yang spesifik lainnya..
Caranya pun cukup mudah...
Coba anda klik tombol yang ada dibawah ini..

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

Isikan saja di sini yang ingin anda hideshow

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

Caranya anda tinggal copy kode script tersebut, dan ganti kode yang berwarna merah dengan postingan yang ingin di hideshow.

atau pakai kode berikut jika ingin menambahkan border seperti contoh ini..

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'OPEN'; }" style="margin: 0px; padding: 0px; width: 100%;" type="button" value="OPEN" /> </div>
<div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: #ffffff; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Isikan disini yang ingin di hide show

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

selamat mencoba..!!!

0 komentar:

Posting Komentar

Google+ Facebook Twitter SC SC mail