Panduan cara membuat Teks Area - Beberapa tahun lalu, blogspot tidak bisa menampilkan kode HTML di dalam postingan secara otomatis. Untuk melakukannya, kita harus menggunakan Add Ons / Pengaya mozilla Firefox atau menggunakan Textarea. Sekarang, blogspot semakin canggih. Tanpa pengaya mozilla dan teks area, kita sudah bisa memposting kode HTML secara otomatis. Lalu, apakah textarea masih di perlukan ? Jawabannya bisa YA bisa juga TIDAK. Tergantung bagaimana penilaian anda terhadap kelebihan dan kekurangan teks area.Kelebihan dan kekurangan Teks Area.
Dengan Text Area, kita bisa memberikan batas pada tulisan atau kode HTML atau apa saja di dalam artikel untuk memperjelas tulisan di dalam text area. Dengan text area, tulisan akan terlihat lebih rapi dengan adanya kotak sebagai pembatas tulisan yang ingin ditonjolkan di dalam postingan blog. Selain itu, blogger juga membutuhkan teks area untuk menampilkan kode HTML pada sidebar blog, meskipun bisa juga menggunakan "kotak dengan fungsi scroll". Kelebihan lain teks area akan terlihat setelah mengetahui beberapa cara membuat teks area di blog. Untuk kekurangannya,saya rasa tidak ada
Beberapa Jenis dan Cara Membuat Teks Area
Untuk membuat text area biasa, kode HTML yang di gunakan seperti ini :<textarea>Tulisan di dalam teks area</textarea>
Karena terlalu sederhana, saya akan menulis beberapa macam cara membuat teks area di blog agar teks area menjadi lebih menarik.
Kode untuk membuat teks area pertama :
<div align="center">Hasilnya :
<textarea cols="30" name="code" rows="3">Ganti tulisan ini dengan dengan Teks atau Kode HTML yang ingin anda tampilkan didalam text area</textarea></div>
Besarnya Text Area tergantung dari besarnya angka ROWS ( tinggi kotak teks area ) dan COLS ( Lebar kotak teks area ).
- Semakin besar angka ROWSnya, semakin tinggi ukuran kotak Text Area begitu juga sebaliknya.
- Semakin besar angka COLSnya, semakin Lebar ukuran kotak Text Area begitu juga sebaliknya.
- Anda bisa mengganti angka-angkanya sesuai dengan kebutuhan anda. Pada contoh di atas, angka yang dimaksud adalah angka 3 dan 30.
- Ganti kode yang berwarna merah lainnya dengan tulisan yang akan di pasang di dalam teks area.
- kode yang berwarna biru ( center ) adalah kode untuk posisi teks area yaitu tengah. Jika ingin membuat teks area berada di pinggir kiri, ganti kode center dengan kode left, untuk membuatnya berada di samping kanan, ganti dengan kode right
Contoh Teks Area di Kiri
Contoh Teks Area di Tengah
Contoh Teks Area di Kanan
Jika anda ingin menampilkan banyak Teks atau kode HTML didalam Text Area, anda tidak perlu membuat kotak Text Areanya terlalu besar, karena text area secara otomatis akan membuat scroll kebawah atau ke samping atau keduanya jika banyak teks di dalamnya. Contohnya seperti ini :
Dengan sedikit menambahkan kode html, text area akan menjadi lebih menarik, yaitu dengan menambahkan tombol untuk di klik. Saat tombol text area di klik semua tulisan yang ada di dalam text area akan langsung terpilih dan tinggal di Copy dengan klik kanan kode yang sudah terpilih lalu pilih salin / copy atau langsung menekan tombol CTRL + huruf C di keyboard. Dengan teks area seperti ini, maka tidak akan ada kode yang tertinggal untuk di copy. Text Area jenis ini di kenal dengan nama Text Area dengan Tombol Highlight. Kode yang digunakan untuk membuat teks area otomatis ini adalah :
<div>Hasilnya :
<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">
<textarea cols="30" name="txt" rows="5" wrap="VIRTUAL">Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area</textarea></div>
</form>
</div>
Silahkan klik pada tulisan HIGHLIGHT ALL, maka semua text yang ada di dalam Text Area akan langsung terHIGHLIGHT / terPILIH.
Sama seperti Text Area yang pertama, anda bisa mengedit kembali kode di atas sesuai keinginan anda, yang penting jangan hancurkan Text Areanya
- Kode Canter pertama = Posisi tulisan Highghlight All
- Kode center kedua = Posisi teks area
- Highlight All = Tulisan di dalam tombol, bisa di ganti sesuai keinginan misalnya "Pilih Semua".
- Kode yang berwarna merah = Cara mengeditnya sudah di jelaskan sebelumnya.
Klik di dalam teks area untuk menyeleksi tulisan yang ada di dalam text area.
Kode untuk membuat text area otomatis seleksi / auto block seperti di atas adalah :
<div style="text-align: center;">Bagaimana mas bro...
<textarea cols="25" onclick="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>
Kode untuk membuat textarea sudah cukup banyak ? Kalau YA, silahkan berhenti membaca sampai di sini. Kalau jawabannya tidak, saya akan tambah lagi kode lain untuk membuat textarea.Silahkan lanjutkan membaca artikelnya..
Kita modifikasi sedikit kode text area terakhir di atas yaitu teks area auto block atau auto seleksi saat text area di klik. Textarea berikut ini akan membuat pengunjung lebih mudah mengcopy tulisan atau kode HTML yang di pasang di dalam teks area karena tulisan di dalam textarea akan otomatis terseleksi atau terblock tanpa di klik melainkan hanya mengarahkan mouse di atas teks area. Kode yang di gunakan untuk membuat teks area otomatis seleksi tanpa di klik ini hampir sama dengan text area auto block. Bedaannya hanya beberapa huruf yaitu kode yang saya tandai dengan warna merah pada kode di bawah. Berikut kodenya :
<div style="text-align: center;">Hasilnya :
<textarea cols="25" onmouseover="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>
Arahkan mouse anda ke dalam test area untuk melihat hasilnya.
Penutup
Saya yakin anda akan memilih cara membuat text area yang terakhir ini, karena itu saya pasang di bagian paling bawah agar anda membaca semua tulisan di artikel ini. Tujuannya, untuk membuat anda lebih memahami cara membuat macam - macam teks area di blog.Dengan banyaknya cara membuat macam - macam textarea di atas, mungkin ada di antara pembaca yang bingung dan kurang memahami kode HTML textarea. Sebenarnya saya masih ingin membuat anda tambah bingung dengan membuat text area yang lebih menarik
. Misalnya, menambahkan background pada text area, memberi warna tulisan, garis pinggir berwarna dan putus - putus, garis tebal dan tipis, dan masih banyak lagi. Tapi karena artikelnya sudah terlalu panjang, saya akan bahas "Cara modifikasi Textarea" sehingga lebih menarik di artikel berikutnya. Sebaiknya baca juga "Cara membuat kotak dengan Fungsi Scroll" agar bisa membuat kode Tukar Link dengan text area dan kotak scroll untuk menyimpan BlogrollSemoga artikel "Beberapa cara membuat textarea di blog" ini bermanfaat.
Selamat berakhir pekan...
Happy blogging...
