Header Ads

Membuat Text Area Auto Block

Membuat Text Area Auto Block

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.

3 comments:

  1. makasih gan atas infonya... sangat bermanfaat sekali buat saya... ^^ sukses blognya...

    ReplyDelete
  2. wah.. mantabss mas tutornya :D

    ReplyDelete
  3. joz gan,...

    visit me http://catatan-adventure.blogspot.com/

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.