Tutorial Cara Membuat Beberapa Macam Textarea di Blog

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


Hasilnya :


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


Berikut contoh posisi teks area :

Contoh Teks Area di Kiri


Ganti tulisan ini dengan dengan Teks atau Kode HTML yang ingin anda tampilkan didalam text area

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


 Hasilnya :


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.


Jenis teks area berikutnya adalah text area auto block. Semua tulisan atau kode yang ada di dalam teks area jenis ini akan terpilih secara otomatis saat kotak text area di klik. Jenis teks area ini hampir sama dengan Jenis teks area sebelumnya. Bedanya, teks area ini tidak menggunakan tombol Highlight All. Bagian yang di klik untuk menyeleksi tulisan adalah bagian di dalam teks area. Saya menggunakan text area seperti ini untuk menyimpan kode Link Bloggerbugis di laman Blogroll / Tukar Link dengan Bloggerbugis Contohnya :


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;">
<textarea cols="25" onclick="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>


Bagaimana mas bro...


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;">
<textarea cols="25" onmouseover="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>


Hasilnya :


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 Blogroll


Semoga artikel "Beberapa cara membuat textarea di blog" ini bermanfaat.


Selamat berakhir pekan...


Happy blogging...

Tutorial Cara Membuat Beberapa Macam Textarea di Blog 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.

Share 'Tutorial Cara Membuat Beberapa Macam Textarea di Blog' On ...

Anda baru saja membaca artikel yang berkategori Panduan Blog dengan judul Tutorial Cara Membuat Beberapa Macam Textarea di Blog. Anda bisa bookmark halaman ini dengan URL http://arioutsider69.blogspot.com/2012/07/tutorial-cara-membuat-beberapa-macam.html. Terima kasih!

Ditulis oleh: AriOutsider69 - Selasa, 10 Juli 2012

Belum ada komentar untuk "Tutorial Cara Membuat Beberapa Macam Textarea di Blog"

Posting Komentar

Tolong memberi komentar yang tidak melanggar norma-norma. Kami berhak menghapus komentar yang kasar, mengejek, bersifat menyerang, dan tidak berhubungan dengan artikel di atas. Oleh sebab itu, kiranya dapat menggunakan bahasa yang jelas!

Pedoman wajib untuk memasukkan komentar:
1. Tidak boleh memakai lebih dari satu kolom komentar.
2. Pertanyaan/masukan harus berhubungan dengan uraian diatas.
3. Sebaiknya satu atau dua pertanyaan dalam satu kolom komentar.
4. Hanya menggunakan bahasa Indonesia yang umum dan dimengerti semua orang.
5. Tidak diperbolehkan menggunakan huruf besar untuk menekankan sesuatu.
6. Tidak diijinkan mencantumkan hyperlink dari situs lain.

Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

Sebelumnya Saya minta maaf yg sebsr2Nya jka komentar anda blm sempat dibls. ^^