Membuat Text Area III (Hide and Show Atau Spoiler)

Text Area kali ini yang akan kita buat yaitu dengan efek Hide and Show atau biasa disebut juga dengan Spoiler,

setelah sebelumnya saya posting "Membuat Text Area Highlight". Hampir sama mengenai fungsi dari text area dan cara menerapkannya, namun yang membuatnya sedikit berbeda, yaitu penghematan bidang atau ruang yang

dibutuhkan saat memasukkan kode atau text yang panjang, singkatnya menyembunyikan isi kolom (Lebih jelas

bentuknya silahkan lihat dan klik tombol berikut).

JUDUL SPOILER

<div>
<div style="margin-bottom: 2px;">
<i><b><small>JUDUL SPOILER</small></b></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:
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;">

MASUKKAN ISI YANG DIINGINKAN DI SINI

</div>
</div>

Copy kode di dalam tersebut untuk membuat Spoiler ini, silahkan terapkan dimana saja anda menginginkannya, misalnya seperti di area sidebar, footer atau artikel.

Keterangan kode :
JUDUL SPOILER : Silahkan ganti dengan text yang ingin anda munculkan
MASUKKAN ISI YANG DIINGINKAN DI SINI : Area text ini bisa anda isi dengan kode, gambar, atau apa saja yang ingin anda tampilkan ke dalam kolom tersebut.
Simpan dan lihat hasilnya. Selamat Mencoba membuat text area hide and show atau spoiler

Beri Kami +1 Agar Terus Semangat Menulis Untuk Anda :

Title : Membuat Text Area III (Hide and Show Atau Spoiler)
Hati-Hati Jika ingin Copy-Paste (15 Blog Sudah TERHAPUS Akibat DMCA Takedown)..!
Pastikan Menyertakan Link Aktif Dofollow Dengan URL :
http://odyckdnero.blogspot.com/2012/01/membuat-text-area-iii-hide-and-show.html

Related Post

Blogging

• Mengembalikan Akun Twitter Yang Ditangguhkan
• Cara Cepat Meningkatkan Ranking Alexa
• Membuat Widget Tanggalan Sendiri
• Mengukur Kecepatan Loading Blog
• Cara Agar Artikel Cepat Terindeks Search Engine
• Daftar Blog Dofollow
• Cara Membuat Kolom Related Post (Artikel Terkait)
• Membuat Efek Blur Pada Gambar
• Memasang Flash Game di Blogger