Cara Membuat Text Area di Blog

Sebagai blogger, Anda pernah mempublikasikan artikel yang berisi teks panjang atau kode html yang panjang. Ketika mempublikasikan mungkin Anda pernah menuliskan teks, kutipan maupun kode html yang begitu panjang atau memang dikhususkan untuk disalin oleh pengunjung blog. Sebagai contoh dalam penulisan kode html yang sangat panjang, tentu akan memakan ruang di blog dan juga formatnya sulit untuk diatur sehingga terkesan tidak rapi dan tidak nyaman dibaca.

Untuk menangani hal tersebut ada solusinya, yaitu menggunakan text area atau area yang dikhususkan untuk teks. Text area adalah sebuah area/kolom yang dibuat sebagai kontainer (untuk memuat) tulisan atau kode html di dalam suatu postingan blog. Selain sebagai kontainer text biasa, text area juga bisa ditambahkan dengan fungsi highlight untuk memudahkan pengunjung melakukan penyalinan seluruh isi di text area tersebut.

Contoh Gambar Text Area

Berikut adalah cara untuk membuat text area di blog:

1. Buka blogger.com dan login ke dalam akun blog Anda.
2. Pilih buat entri baru atau edit entri lama.
3. Pindah ke menu edit HTML.
4. Salin dan tempelkan kode script text area.

Selanjutnya ada beberapa model text area, antara lain model text area biasa dan text area dengan highlight. Anda dapat memilihnya sesuai dengan kebutuhan Anda. Berikut adalah model-model text area tersebut:

Text Area Biasa

<p align="center">

<textarea name="mytextarea" rows="5" cols="40" readonly="">

ISI DENGAN TEXT YANG DIINGINKAN

</textarea></p>

Ada dua parameter yang perlu diperhatikan. Pertama adalah cols, yang berarti jumlah karakter yang ditampilkan per baris. Parameter kedua adalah rows yang berarti jumlah baris yang akan ditampilkan oleh text area. Apabila jumlah baris yang diketik lebih panjang dari yang disediakan maka text area akan menampilkan scroll secara otomatis.

Berikut adalah contohnya:

ISI DENGAN TEXT YANG DIINGINKAN

Text Area dengan Highlight

Text area juga bisa dibuat dengan menambahkan fungsi highlight, di mana fungsi ini akan menyorot semua text yang berada di dalam text area. Ini akan membantu pengunjung blog jika ingin menyalin keseluruhan isi text di text area yang terlalu panjang dengan lebih cepat.

<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: 95%; HEIGHT: 300px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="">
ISI DENGAN TEXT YANG DIINGINKAN
</textarea></p></div></form>

Kode di atas mempunyai dua bagian utama, yaitu yang membuat fungsi highlight dan yang membuat fungsi text area. Dari semuanya ada beberapa kode yang dapat diubah, diantaranya yaitu:

• Height: 300px yang menyatakan tinggi text area anda nantinya, bisa dalam pixel atau persen.
• Width: 95% yang menyatakan lebar dari text area, bisa dalam pixel atau persen.
• Value="Highlight All" adalah text yang akan ditampilkan pada tombol. Anda dapat menggantinya dengan kata lain, misalnya Pilih Semua, Blok Semua, dsb.

Berikut adalah contohnya:

ISI DENGAN TEXT YANG DIINGINKAN

Text Area dengan Auto Highlight saat Diklik

Text area ini berbeda dengan text area sebelumnya, dimana tidak memiliki tombol untuk highlight. Namun tetap memiliki fungsi highlight, saat pengunjung mengklik di dalam text area maka secara otomatis akan melakukan highlight pada keseluruhan text yang berada di text area.

<div style="text-align: center;">

<textarea cols="40" onclick="this.focus(); this.select();" rows="4">

ISI DENGAN TEXT YANG DIINGINKAN

</textarea></div>

Berikut adalah contohnya:

ISI DENGAN TEXT YANG DIINGINKAN

Text Area dengan Auto Highlight saat Didekati Mouse

Text area ini berbeda lagi dengan text area sebelumnya, dimana memiliki fitur auto highlight saat pengunjung mengarahkan mouse ke dalam text area. maka secara otomatis akan melakukan highlight pada keseluruhan text yang berada di text area.

<div style="text-align: center;">

<textarea cols="40" onmouseover="this.focus(); this.select();" rows="4">

ISI DENGAN TEXT YANG DIINGINKAN

</textarea></div>

Berikut adalah contohnya:

ISI DENGAN TEXT YANG DIINGINKAN

...............................................................................................................

Selanjutnya ada beberap hal tambahan yang perlu diperhatikan, yaitu anda juga dapat mengganti posisi text area dengan mengubah center pada div style="text-align: center;", dengan right, left atau justify.

Diperbarui pada 22 Januari 2017.