13 Apr 2012

thumbnail

Membuat Button Show/Close Di Blog



Untuk kesempatan kali ini kita akan membahas tentang cara membuat button show/close di blog,ini digunakan untuk mempersingkat text atau kode maupun gambar untuk disembunyikan.Eitss,tapi tenang dulu file yang sudah sobat sisipkan tadi tidak akan hilang,melainkan di sisipkan agar kode atau gambar yang sedemikian panjangnya bisa menjadi singkat.Untuk mempersingkat kata,kita langsung ke TKP. .



Berikut contoh hasilnya

Contoh hasil pembuatan button show/close pada blog

Ini saya tunjukan kode script yang akan digunakan
<div>
<div style="margin: 5px;">
<div class="smallfont" 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 = 'Show'; }" style="font-size: 15px; margin: 0px; padding: 0px; width: auto;" type="button" value="Show" /></div>
<div class="alt2">
<div style="display: none;">
<div style="border: 1px dotted rgb(0, 100, 0); text-align: justify;">
MASUKAN KONTEN DISINI</div>
</div>
</div>
</div>
</div>
 Catatan : untuk text yang berwarna biru sahabat kumpull blogger bisa ganti sesuai dengan keinginan sobat.

silahkan tinggalkan komentar jika ada yang ingin ditanyakan,jangan sungkan-sungkan untuk bertanya kita sharing bersama.


>>Selamat mencoba<<<

Subscribe by Email

Follow Updates Articles from This Blog via Email

No Comments