Untuk membuat text area di Blogger telah dibahas di blog ini pada beberapa waktu yang lalu. Dalam postingan tersebut sudah diterangkan mengenai cara membuat text area biasa dan text area yang memakai tombol 'highlight'. Kali ini masih akan dibahas tentang cara membuat text area. Namun, text area yang berikut ini akan ada penambahan gaya.
Gaya apakah yang dimaksud? Pada kesempatan kali ini akan dibuat text area auto block. Maksudnya, jika kita mengarahkan mouse pointer ke daerah text area, maka teksnya akan ter-block atau ter-highlight secara otomatis tanpa perlu mengkliknya. Untuk membuat text area seperti itu, kita perlu menambahkan kode onmouseover="this.form.txt.select()" readonly="readonly" sehingga secara keseluruhan kode untuk membuat text area akan menjadi seperti di bawah ini.
<div align="center">
<form name="gayamunadi">
<textarea cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 40px; width: 350px;">Simpan tulisan atau kode HTML Anda di sini, maka teks Anda akan siap di-copy oleh para pengunjung blog Anda.</textarea></form>
</div>
- div align="center" menunjukkan posisi text area berada di tengah. Kalau ingin berada di kiri, center diganti dengan left, bila mau di kanan, center diubah menjadi right.
- width: 350px; menunjukkan lebar text area sebesar 350 piksel. Bila ingin yang lebih lebar lagi, silakan ganti angka 350 dengan nilai yang lebih tinggi atau sebaliknya.
- height: 40px; menunjukkan tinggi bidang text area sebesar 40 piksel. Jika ingin yang lebih tinggi lagi, ubah angka 40 dengan nilai yang lebih besar.
Contoh:
Saya akan memasukkan teks di bawah ini ke text area.
<a href="http://klikmunadi.blogspot.com/" target="_blank">Klik Munadi</a>
Maka kodenya akan menjadi seperti ini.
<div align="center">
<form name="gayamunadi">
<textarea cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 40px; width: 350px;"><a href="http://klikmunadi.blogspot.com/" target="_blank">Klik Munadi</a></textarea></form>
</div>
Sehingga hasilnya akan seperti di bawah ini.
Tidak ada komentar:
Posting Komentar