Membuat Text Area di Blog
Category: BeLaJaR 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 . . .
Buat memudahkan kita semua dalam memahami "text area", berikut ini adalah kode dasar/standar dari text area . . .
hasilnya akan seperti ini:
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:
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>
<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:
2. Text Area dengan satu klik maka seluruh isi akan di blok
Kode:
Kode:
<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>
Hasilnya:
3. Text Area dengan tambahan select all button
Kode:
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>
<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:
4. Text Area yang jika disorot mouse akan di blok semua
Kode:
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>
<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:
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:
Text area border ini jarang gw temuin di blognya temen-temen blogger lain. Mungkin karena tampilannya rada beda, jadi engga banyak yang mau ngegunainnya
TERIMAKASIH
TERIMAKASIH
1 ƘǿmєиtąЯ:
Makasih ya, jadi tau sekarang..
Kunjungan balik ya gan
http://fahmi1597.blogspot.com