Cara Membuat Tombol Show dan Hide Seperti di Kaskus


Kali ini Saya akan membahas Cara Membuat Tombol Show dan Hide Seperti di Kaskus.
Ketika Saya baru pertama kali blogging, Saya mencari cara untuk meletakkan script atau kode yang sangat panjang dan ribet, dari kotak scroll sampai text area dan masih banyak lagi cara meletakkan script dengan mudah dan simple. Tidak sengaja Saya berkunjung ke kaskus dan mulailah otak Saya berfikir karena melihat tombol show hide kaskus. Mulailah Saya bertanya kepada mbah google dan akhirnya ketemu cara untuk membuat tombol show hide seperti di kaskus. Tanpa berlama-lama Saya akan membahas cara memasangnya.


Caranya seperti di bawah ini :

  • Copy paste script di bawah ini ketika Anda mau membuat artikel dan letakkan di HTML bukan Compose
  • Ukuran kotak bisa Anda atur sendiri dengan mengubah width atau heightnya

Spoiler for title :
Spoiler for title : <div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> for <i>title</i> : <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: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>
<div class="alt2" style="-moz-background-inline-policy: continuous; background: none repeat scroll 0% 0% rgb(225, 228, 242); border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

isi dengan tulisan atau gambar

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

Semoga Bermanfaat !

Belum ada Komentar untuk "Cara Membuat Tombol Show dan Hide Seperti di Kaskus"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Tekan close (x) 2 kali untuk menutup, jangan lupa Berlangganan

Masukkan Email aktif untuk update artikel via email :

Delivered by FeedBurner

×