Cara Membuat Text Area di Halaman Blog

Cara Membuat Text Area di Halaman Blog -- Anda pasti sering melihat gambar seperti di bawah. Space atau kolom berbentuk kotak berfungsi sebagai kontainer tulisan atau kode HTML. Dilengkapi fungsi scroll, ia dapat memuat tulisan atau kode-kode yang sangat panjang. Dan untuk memudahkan melakukan copy secara akurat, ia bisa diberi fungsi highlight. Di dunia blog itulah yang kita sebut Text Area. 

Text Area tampil seperti halaman dalam halaman. Fungsinya, selain untuk menghemat ruang dan menjaga alur tulisan tetap mengalir dan tidak semberawut, text area juga sering dibutuhkan untuk menyimpan kode HTML yang tidak bisa ditulis langsung ke dalam postingan di dalam blog.

Jika anda ingin tau cara membuat text area, ikuti langkah-langkah berikut.

Text Area tanpa Highlight (Standard)

Untuk membuat text area standard (tanpa fitur highligt), langkah-langkahnya adalah:

1.    Copy kode di bawah ini, dan paste-kan di halaman posting mode HTML. (Ingat... bukan di halaman posting biasa atau compose, tapi di halaman posting mode HTML).

 <p align="center"><textarea name="code" rows="2" cols="15"> Tulis sesuatu di sini yang ingin ditampilkan di dalam text area </textarea></p>

Tempatkan lokasi kode sesuai dengan lokasi text area yang anda butuhkan.

2.    Ganti tulisan berwarna merah dengan tulisan yang ingin anda munculkan di dalam text area.

3.    Sesuaikan angka “rows” dan angka “cols”.  Angka "rows"=3 menunjukkan tinggi dari text area, dan angka cols=”15” menunjukkan lebar text area. Anda bisa mengganti lebar dan tinggi text area sesuai kebutuhan.

4.    Jika sudah, anda bisa beralih ke halaman Compose dan lihat hasilnya. Selesai!

Text Area dengan tombol Highlight

Seperti disebutkan di atas, text area juga bisa ditambah dengan tombol Highlight untuk memudahkan melakukan copy secara akurat. Dengan hanya menekan tombol highlight seluruh isi text area akan tersorot atau terblok. Selanjutnya tinggal dicopas sesuai keperluan. Fungsi tombol ini sangat berguna untuk mencegah tertinggalnya satu atau beberapa isi dari text area.

Langkah-langkahnya adalah:

1.    Copy kode HTML yang berikut ini:

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">Tulis sesuatu di sini yang ingin ditampilkan di dalam text area</textarea></p></form></div>

2.    Paste-kan di halaman posting mode HTML sesuai lokasi text area yang anda inginkan.

3.    Ganti tulisan berwarna merah dengan tulisan atau kode script yang ingin ditampilkan di dalam text area.

4.    Selesai dan lihat hasilnya di halaman compose. 

Sebelum kita tutup, berikut ini beberapa penjelasan tambahan mengenai kode HTML di atas jika anda ingin melakukan perubahan tampilan text area.

1.    <div align="center"> ==> maksudnya posisi tombol akan berada di tengah. Ganti kata ”center” dengan ”left” atau ”right” jika posisi tombol ingin pindah ke kiri atau ke kanan.

2.    Value="Highlight All" ==> tulisan  ”Highlight All” adalah tulisan yang akan muncul di dalam tombol. Anda bisa merubahnya dengan kata lain sesuai keinginan.

3.    <p align="center"> ==> ini menunjukan posisi text area berada di tengah. Robah kata “center” dengan “left” atau “right” jika ingin menempatkannya di kiri atau di kanan.

4.    <text style="WIDTH: 150px"> ==> ini menunjukan lebar dari text area = 150 pixel, silahkan robah sesuai kebutuhan, misalnya : "WIDTH:300px;"

5.    HEIGHT: 80px  ==> menunjukan tinggi text area =80 px, silahkan robah dengan tinggi yang diinginkan. Misal : HEIGHT:120px.

 

Demikian tips dan cara sederhana dalam membuat text area. Terimakasih sudah berkunjung dan jangan lupa tinggalkan komentar. Semoga bermanfaat!!!
_________________