Membuat Text Area di Blog

Membuat Text Area di Blog - Text area adalah suatu tempat atau area yang digunakan untuk menyimpan suatu teks atau kode HTML tertentu. dalam penggunaannya text area bisa ditempatkan di dalam suatu page(halaman) atau bisa juga diletakkan dalam suatu widget. Dengan menggunakan text area, pengunjung blog akan lebih dimudahkan dalam proses mennyalin data (copy).

Buat memudahkan kita semua dalam memahami "text area", berikut ini adalah kode dasar/standar dari text area . . .

<textarea>isi dari teks area</textarea>

hasilnya akan seperti ini:

isi dari teks area

Contoh diatas adalah text area yang dibuat dengan kode/script standar. Sebenernya ada beberapa jenis text area yang bisa dibuat, tapi gw coba buat sharing 4 jenis "text area" yang biasa digunain dalam proses blogging.

1. Text Area yang kolom dan barisnya bisa diatur
Kode:

<div align="center">
<textarea name="code" rows="2" cols=35">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea></div>

hasilnya:

Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat

2. Text Area dengan satu klik maka seluruh isi akan di blok
Kode:

<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>

Hasilnya:

Coba klik teks ini !!

3. Text Area dengan tambahan select all button
Kode:

<div align="center">
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div>
<div align="center">
<textarea style="width: 300px; height: 80px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea>
</div>
</div>
</form>

Hasilnya:

Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat

4. Text Area yang jika disorot mouse akan di blok semua
Kode:

<div>
<form name="agungindraguna">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 50px; width: 300px;">coba arahkan mouse ke teks ini !!</textarea></div>
</form>
</div>

Hasilnya:

coba arahkan mouse ke teks ini !!

Keempat jenis text area di atas adalah yang umum dipergunakan dalam proses blogging. Sebenernya masih ada jenis lainnya, yaitu Text Area dengan border

Kode:

<div align="center"><textarea cols="35" rows="2" style="border: 2px dotted red ;">Tulis apa aja deh.. terserah !!</textarea></div>

Hasilnya:

Tulis apa aja deh.. terserah !!

Text area border ini jarang gw temuin di blognya temen-temen blogger lain. Mungkin karena tampilannya rada beda, jadi engga banyak yang mau ngegunainnya.

Gw kira sharing kali ini cukup . . . Semoga bermanfaat buat kita semua !! Amiiinnn !!

---

Related Post on Agung X-Zeg Indraguna's World_