Cara Membuat Spoiler atau Teks Area Tersembunyi

Ada beberapa cara bagi kita untuk memperlihatkan teks area dengan berbagai jenis tampilan. Tapi sudahkah anda pernah membuat teks area yang dapat disembunyikan. Dengan hanya sekali klik anda dapat menampilkan teks pada blog sobat. Teks area show hide ini sering dikenal dengan istilah "Spoiler". Dengan trik yang satu ini sobat tidak perlu repot2 menghabiskan banyak ruang pada blog.

Dari pada menampilkan teks yang panjang mending menampilkan teks yang disembunyikan. Sobat dapat lihat spoiler yang saya buat dibawah ini. Klik aja tombol Show. Jika ingin tau bagaimana cara membuatnya ikuti langkah dibawah ini:

--ISI TULISAN SOBAT DISINI ---

1. Langsung saja masuk pada posting sobat (tab Edit HTML) atau pada Gadjet (HTML/Javascript)
2. Kopi kode dibawah ini lalu paste di blog sobat

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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'; }" type="button"/>
</div>
<div class="alt2" style="border: 0px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
--ISI TULISAN SOBAT DISINI ---
</div></div></div></div>

3. Isi teks anda pada kode berwarna merah
4. Simpan hasil kerja anda lalu lihat hasilnya

Posted in: Teks