Dengan Text Area, kita bisa memberikan batas pada tulisan atau kode HTML atau apa saja di dalam artikel untuk memperjelas tulisan di dalam text area. Dengan text area, tulisan akan terlihat lebih rapi dengan adanya kotak sebagai pembatas tulisan yang ingin ditonjolkan di dalam postingan blog. Selain itu, blogger juga membutuhkan teks area untuk menampilkan kode HTML pada sidebar blog, meskipun bisa juga menggunakan "kotak dengan fungsi scroll". Kelebihan lain teks area akan terlihat setelah mengetahui beberapa cara membuat teks area di blog. Untuk kekurangannya,saya rasa tidak ada.
Beberapa Jenis dan Cara Membuat Teks Area
Untuk membuat text area biasa, kode HTML yang di gunakan seperti ini :<textarea>Tulisan di dalam teks area</textarea>
Karena terlalu sederhana, saya akan menulis beberapa macam cara membuat teks area di blog agar teks area menjadi lebih menarik .
Kode untuk membuat teks area pertama :
<div align="center">
<textarea cols="30" name="code" rows="3">Ganti tulisan ini dengan dengan Teks atau Kode HTML yang ingin anda tampilkan didalam text area</textarea></div>
<textarea cols="30" name="code" rows="3">Ganti tulisan ini dengan dengan Teks atau Kode HTML yang ingin anda tampilkan didalam text area</textarea></div>
Besarnya Text Area tergantung dari besarnya angka ROWS ( tinggi kotak teks area ) dan COLS ( Lebar kotak teks area ).
- Semakin besar angka ROWSnya, semakin tinggi ukuran kotak Text Area begitu juga sebaliknya.
- Semakin besar angka COLSnya, semakin Lebar ukuran kotak Text Area begitu juga sebaliknya.
- Anda bisa mengganti angka-angkanya sesuai dengan kebutuhan anda. Pada contoh di atas, angka yang dimaksud adalah angka 3 dan 30.
- Ganti kode yang berwarna merah lainnya dengan tulisan yang akan di pasang di dalam teks area.
- kode yang berwarna biru ( center ) adalah kode untuk posisi teks area yaitu tengah. Jika ingin membuat teks area berada di pinggir kiri, ganti kode center dengan kode left, untuk membuatnya berada di samping kanan, ganti dengan kode right
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="30" name="txt" rows="5" wrap="VIRTUAL">Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area</textarea></div>
</form>
</div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="30" name="txt" rows="5" wrap="VIRTUAL">Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area</textarea></div>
</form>
</div>
Silahkan klik pada tulisan HIGHLIGHT ALL, maka semua text yang ada di dalam Text Area akan langsung terHIGHLIGHT / terPILIH.
Sama seperti Text Area yang pertama, anda bisa mengedit kembali kode di atas sesuai keinginan anda, yang penting jangan hancurkan Text Areanya .
- Kode Canter pertama = Posisi tulisan Highghlight All
- Kode center kedua = Posisi teks area
- Highlight All = Tulisan di dalam tombol, bisa di ganti sesuai keinginan misalnya "Pilih Semua".
- Kode yang berwarna merah = Cara mengeditnya sudah di jelaskan sebelumnya.
Kode untuk membuat text area otomatis seleksi / auto block seperti di atas adalah :
<div style="text-align: center;">
<textarea cols="25" onclick="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>
<textarea cols="25" onclick="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>
Kita modifikasi sedikit kode text area terakhir di atas yaitu teks area auto block atau auto seleksi saat text area di klik. Textarea berikut ini akan membuat pengunjung lebih mudah mengcopy tulisan atau kode HTML yang di pasang di dalam teks area karena tulisan di dalam textarea akan otomatis terseleksi atau terblock tanpa di klik melainkan hanya mengarahkan mouse di atas teks area. Kode yang di gunakan untuk membuat teks area otomatis seleksi tanpa di klik ini hampir sama dengan text area auto block. Bedaannya hanya beberapa huruf yaitu kode yang saya tandai dengan warna merah pada kode di bawah. Berikut kodenya :
<div style="text-align: center;">
<textarea cols="25" onmouseover="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>
<textarea cols="25" onmouseover="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>
Bijaklah dalam berkomentar
EmoticonEmoticon