Apa itu Text Area Pada Blog?

Widgets

Text area merupakan hal yang cukup penting bagi kita dalam menonjolkan teks ataupun kode dan script yang sudah di-encode yang ada di dalam postingan maupun yang terdapat pada widget blog kita. Text area itu sendiri biasanya berbentuk kotak atau bingkai sehingga membedakan isi pada text area tersebut dengan tulisan lainnya. Intinya, text area itu pada umumnya digunakan untuk mempermudah para pembaca blog kita dalam memblok teks maupun script yang kita tonjolkan tersebut. Text area sendiri hampir sama dengan blockquote, namun untuk postingan kali ini saya ingin lebih memperjelas lagi mengenai apa itu text area beserta ragam bentuknya. 

Khusus untuk kode ataupun script yang ingin sobat tampilkan ke dalam text area, sobat perlu meng-encode terlebih dahulu kode atau script html tersebut agar tampilannya dalam text area tersebut cuma dan hanya berbentuk tulisan saja. Silahkan sobat lihat contoh dari penggunaan text area di bawah ini yang mungkin sudah sering sobat lihat pada blog maupun situs yang lain saat browsing internet.

Variasi Text Area Pada Blog

Cukup banyak model dari text area ini yang sering digunakan pada blog. jadi silahkan pilih sendiri text area yang cocok bagi sobat sekalian.

1. Text Area Dengan Tampilan biasa

<textarea>deskripsi teks anda disini</textarea>

Tampilannya akan seperti ini :
deskripsi teks anda disini
2. Text Area Dengan Tampilan Border & Background

<div style="border: 3px dashed rgb(245, 0, 61); padding: 5px; background: rgb(255, 255, 204) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Tulisan deskripsi yang ingin sobat tampilkan disini</div></blockquote>

Tampilannya akan seperti ini :

Tulisan deskripsi yang ingin sobat tampilkan disini

3. Text Area Dengan Tombol Highlight

<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"></div><p align="center><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Tambahkan teks yang diinginkan disini. Jika teks terlalu panjang, maka akan memunculkan scroll secara otomatis dalam text area sehingga membantu pembaca blog dalam mengcopy tulisan ataupun script yang diperlukan</textarea></p></div></form>

Tampilannya akan seperti ini :

Tambahkan teks yang diinginkan disini. Jika teks terlalu panjang, maka akan memunculkan scroll secara otomatis dalam text area sehingga membantu pembaca blog dalam mengcopy tulisan ataupun script yang diperlukan

Keterangan :

• center menunjukkan letak dari tombol highlight all, ganti dengan "left" jika letaknya di kiri teks atau "right" bila letaknya di kanan teks. 
• Highlight All silahkan ganti dengan yang sobat inginkan pada tulisan tombolnya.
• WIDTH: 200px menunjukkan ukuran lebar dari text area, silahkan ubah sesuai keinginan sobat. 
• HEIGHT: 100px menunjukkan ukuran tinggi dari text area, ubah sesuai keperluan.
• 100 menunjukkan jumlah baris didalam text area, ubah jika diperlukan atau biarkan secara default. 
• 55 menunjukkan jumlah karakter yang ditampilkan per barisnya, ubah sesuai keinginan sobat atau biarkan secara default.

4. Teks Area Dengan Tulisan Terblok Saat Diklik

<div align="center">
<textarea rows="4" cols="35" onclick="this.focus(); this.select();">Tambahkan teks yang diinginkan disini. Jika teks terlalu panjang, maka akan memunculkan scroll secara otomatis dalam text area sehingga membantu pembaca blog dalam mengcopy tulisan ataupun script yang diperlukan</textarea></div>

Tampilannya akan seperti ini :

Tambahkan teks yang diinginkan disini. Jika teks terlalu panjang, maka akan memunculkan scroll secara otomatis dalam text area sehingga membantu pembaca blog dalam mengcopy tulisan ataupun script yang diperlukan

5. Teks Area Terblok Secara Otomatis Saat Disorot Mouse

<div><form name="BlockbyMouse"><div align="center" style="margin-bottom: 0pt; margin-top: 0pt;"><textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" rows="100" style="height: 50px; width: 300px;">Silahkan sorot teks dengan mouse sobat disini</textarea</div></form></div>

Tampilannya akan seperti ini :

Silahkan sorot teks dengan mouse sobat disini

Last Words

Demikianlah postingan kali ini mengenai Apa itu Text Area Pada Blog? Terakhir kalinya, bagi sobat yang tidak ingin agar tulisan yang ada di dalam text area tersebut dapat dihapus atau dalam arti lain tulisan tersebut bersifat read-only. Silahkan sobat tambahkan readonly="" sebelum tulisan pada text area. Contohnya seperti ini.

<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();" readonly="">Tambahkan teks yang diinginkan disini. Jika teks terlalu panjang, maka akan memunculkan scroll secara otomatis dalam text area. Coba klik dan hapus tulisan ini!!</textarea></div>

Tampilannya akan seperti ini :

Tambahkan teks yang diinginkan disini. Jika teks terlalu panjang, maka akan memunculkan scroll secara otomatis dalam text area. Coba klik dan hapus teks ini!!