Selasa, 13 November 2012

Tutorial Membuat Beberapa Macam Textarea di blog

- Beberapa tahun lalu, blogspot tidak bisa
menampilkan kode HTML di dalam postingan
secara otomatis. Untuk melakukannya, kita
harus menggunakan add ons/pengaya mozilla
firefox/menggunakan tesxarea. Sekarang
blogspot semakin canggih. Tanpa pengaya
mozilla & textarea, kita sudah bisa memposting
kode HTML secara otomatis. Lalu apakah
textarea masih diperlukan ? jawabannya bisa YA
bisa juga TIDAK. tergantung penilaian sobat
terhadap kelebihan dan kekurangan teks area.


Kelebihan & 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 teksarea di blog.
Untuk kekurangannya,saya rasa tidak ada.... HEHEHE

Beberapa Jenis & Cara Membuat Teks Area


Untuk membuat text area biasa, kode HTML yang digunakan 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.
  • sobat bisa mengganti angka-angkanya sesuai kebutuhan sobat, pada contoh
    di atas angka yang dimaksud adalah angka 3 dan 30.
  • ganti kode yang berwarna merah lainnya dengan tulisan yang akan dipasang
    di dalam teks area. 
  • kode yang berwarna biru (center) adalah kode untuk posisi teks area yaitu
    tengah. Jika ingin membuat teks area dipinggir kiri, Ganti kode center dengan
    kode Left , Untuk mengubah dipinggir kanan ganti kode dengan kode Right.
Berikut contoh posisi teks area :

ContohTeks Area di kiri   Teks Area di tengah      Teks Area di kanan


jika sobat ingin menampilkan banyak teks atau kode HTML didalam teks area,
sobat tidak perlu membuat kotak teks areanya terlalu besar, karena teks area otomatis 
akan membuat Scroll kebawah atau kesamping, seperti contoh dibawah 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....HEHE

  • Kode center pertama = Posisi tulisan HIGHLIGHT 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.. HHE :D

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 arah teks 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 :D . 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. :D

semoga artikel beberapa cara membuat teks area di blog ini BERMANFAAT.

selamat berakhir pekan.
salam blogging....



Tidak ada komentar:

Posting Komentar