Cara Membuat Text Area di Blogger

Text Area atau Area Teks merupakan tempat atau area berbentuk persegi yang digunakan untuk menyimpan suatu tulisan atau teks dan membentuk area tersendiri. Biasanya text area ini dipakai untuk menyimpan kode-kode HTML serta teks-teks yang lainnya agar dapat di-copy oleh para pengunjung blog dengan mudah. Ada 2 macam text area yang sering kita jumpai, yaitu text area tanpa tombol highlight dan text area dengan tombol highlight.

Pada text area yang ke-dua, yaitu text area dengan tombol highlight, cara meng-copy teksnya lebih mudah dan praktis. Mengapa demikian? Karena hanya dengan mengeklik tombol highlight maka seluruh teks yang ada di text area akan ter-highlight secara otomatis. Dengan demikian akan memudahkan para pengunjung karena mereka tinggal mengeklik kanan mouse saja lalu pilih Copy maka teks telah ter-copy.

Untuk membuat text area tanpa tombol highlight, silakan copy kode di bawah ini.

<div align="center">
<textarea cols="25" name="code" rows="5">Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area</textarea></div>

Keterangan:

• <div align="center">, kata center menunjukkan bahwa text area berada di tengah. Jika ingin berada di kiri, diganti dengan left. Bila Anda ingin di kanan, kata center diganti dengan kata right.
• rows="5", menunjukkan tinggi dari text area, yaitu setinggi 5 baris. Jika isi text area melebihi 5 baris maka akan terbentuk penggulung di sisi kanan. Bila Anda menginginkan text area yang lebih tinggi lagi, silakan ganti angka 5 dengan angka yang lebih tinggi nilainya.
• cols="25", menunjukkan lebar dari text area, yaitu tiap baris maksimal mengandung 25 karakter. Jika Anda menghendaki text area yang lebih lebar lagi, silakan ganti angka 25 dengan angka yang lebih tinggi nilainya.

Bila kode untuk membuat text area tanpa tombol highlight di atas ditaruh di Edit HTML, maka hasilnya akan seperti ini.

Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area

Untuk membuat text area dengan tombol highlight, silakan copy kode di bawah ini.

<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>

<div align="center">

<textarea cols="55" name="txt" rows="100" style="height: 150px; width: 350px;" wrap="VIRTUAL">Simpan tulisan atau kode HTML Anda di sini, maka teks Anda akan siap di-copy oleh para pengunjung blog Anda.</textarea></div>

</form>

</div>

Kode di atas mempunyai 2 elemen bagian. Elemen yang pertama adalah elemen kode pembentuk tombol yang bertuliskan Highlight All. Sedangkan elemen yang kedua adalah elemen kode pembentuk text area.

Keterangan untuk elemen pembentuk tombol bertuliskan Highlight All:

• <div align="center">, kata center menunjukkan bahwa posisi tombol berada di tengah. Bila Anda ingin posisi tombol itu berada di sebelah kanan, ganti kata center dengan right. Jika ingin berada di sisi kiri, Anda ganti kata center dengan kata left.
• input onclick="javascript:this.form.txt.focus();this.form.txt.select();", kode ini menunjukkan kalau tombol Highlight All diklik maka seluruh teks yang ada di dalam text area akan ter-highlight.
• value="Highlight All", kata Highlight All adalah kata yang muncul di tombol. Anda dapat menggantinya dengan kata keinginan Anda.

Keterangan untuk elemen pembentuk text area:

• <div align="center">, menunjukkan text area berada di tengah. Jika Anda ingin text area berada di kiri, ganti kata center dengan left. Sedangkan bila Anda ingin di kanan, ganti kata center dengan right.
• width: 350px;, menunjukkan lebar dari text area sebesar 350 piksel. Jika ingin lebih lebar lagi silakan diganti angka 350 dengan angka yang lebih tinggi lagi nilainya.
• height: 150px;, menunjukkan tinggi dari text area. Bila ingin lebih tinggi lagi, silakan ganti angka 150 dengan dengan yang lebih tinggi lagi nilainya.

Bila kode text area dengan tombol highlight di atas diletakkan di Edit HTML, maka hasilnya akan seperti ini.

Simpan tulisan atau kode HTML Anda di sini, maka teks Anda akan siap di-copy oleh para pengunjung blog Anda.