Friday, February 8, 2013

Buat Spoiler Show Hide

Cara buat tombol spoiler show hide di blog bikin button buka tutup di postingan blogger tidak sulit dan mudah tentunya, perhatikan caranya dibawah ini

contoh tombol show hide atau buka tutup

CONTOH TEKS / KONTEN ATAU GAMBAR ANDA DISINI


Kodenya berikut

<div><div 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
CONTOH TEKS / KONTEN ATAU GAMBAR ANDA DISINI
</div>
</div>
</div>


Atau contoh lain dari show hide button

Tulisan, Gambar Atau Video yang akan dimasukkan dalan Spoiler ( yang bisa ditampilkan atau disembunyikan )


Kode nya berikut

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e6e6e6; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Show" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div> <div style="padding:5px; text-align:justify;"><div style="display: none;">Tulisan, Gambar Atau Video yang akan dimasukkan dalan Spoiler ( yang bisa ditampilkan atau disembunyikan ) </div></div></div !akhir spoiler>


mudah mudahan berhasil terima kasih

No comments:

Post a Comment