Buat memudahkan kita semua dalam memahami "text area", berikut ini adalah kode dasar/standar dari text area . . .
hasilnya akan seperti ini:
Contoh diatas adalah text area yang dibuat dengan kode/script standar. Sebenernya ada beberapa jenis text area yang bisa dibuat, tapi gw coba buat sharing 4 jenis "text area" yang biasa digunain dalam proses blogging.
1. Text Area yang kolom dan barisnya bisa diatur
Kode:
<div align="center">
<textarea name="code" rows="2" cols=35">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea></div>
<textarea name="code" rows="2" cols=35">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea></div>
hasilnya:
2. Text Area dengan satu klik maka seluruh isi akan di blok
Kode:
<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>
Hasilnya:
3. Text Area dengan tambahan select all button
Kode:
<div align="center">
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div>
<div align="center">
<textarea style="width: 300px; height: 80px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea>
</div>
</div>
</form>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div>
<div align="center">
<textarea style="width: 300px; height: 80px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea>
</div>
</div>
</form>
Hasilnya:
4. Text Area yang jika disorot mouse akan di blok semua
Kode:
<div>
<form name="agungindraguna">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 50px; width: 300px;">coba arahkan mouse ke teks ini !!</textarea></div>
</form>
</div>
<form name="agungindraguna">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 50px; width: 300px;">coba arahkan mouse ke teks ini !!</textarea></div>
</form>
</div>
Hasilnya:
Keempat jenis text area di atas adalah yang umum dipergunakan dalam proses blogging. Sebenernya masih ada jenis lainnya, yaitu Text Area dengan border
Kode:
<div align="center"><textarea cols="35" rows="2" style="border: 2px dotted red ;">Tulis apa aja deh.. terserah !!</textarea></div>
Hasilnya:
Text area border ini jarang gw temuin di blognya temen-temen blogger lain. Mungkin karena tampilannya rada beda, jadi engga banyak yang mau ngegunainnya.
Gw kira sharing kali ini cukup . . . Semoga bermanfaat buat kita semua !! Amiiinnn !!
Related Post on Agung X-Zeg Indraguna's World
Blog World
- Menambahkan Efek OnMouseOver Transparan Pada Gambar
- Cara Pasang Energy Saving Mode dengan Gambar
- Menambahkan Efek OnMouseOver Pada Gambar
- Cara Membuat Teks Warna Pelangi (Rainbow Text)
- Cara Pasang Navigasi Breadcumb di Blogger
- Cara Mengganti dan Menampilkan Favicon Blog di Semua Browser
- Menambahkan Emoticon Pada Shoutmix
- Cara Membuat Komentar Pemilik Blog Berbeda Dengan Pengunjung
- Membuat Spoiler di Blog
- Membuat Gambar Melayang di Blog
- Cara Pasang AddThis Share Button di Blog
- Cara Pasang Kode Warna HTML (HTML Color Code) di Blog
- Menambahkan Pesan di Bawah Posting Blog
- Link Otomatis Terbuka Tanpa di Klik
- Menampilakan Avatar Komentator
- Link Bergerak Saat Disorot Mouse
- Cara Membuat Buku Tamu Tersembunyi
- Daftar Website/Blog di Google, Yahoo dan Search Engine Lainnya
- Cara Membuat Form Untuk Banner Exchange
- Menambahkan Energi Saving Mode di Blog
- Menambahkan Scroll Button di Arsip Blog
- Auto-Hide Navigation Bar
- Membuat Efek Link Warna Pelangi
- Menghilangkan Navigation Bar di Blog
12 komentar:
nice tips shob ...
keren sahabat ...
@Syahida : thx..
@BRI Jakarta Veteran : terima kasih udah nyempetin baca kawan !!
Lengkap banget sob,,,
wah daridulu ini nih yang saya cari..
nice info neng..
hehe..
@Sahili : haha.. ia sob, masih belajar nih !!
@ECAZA : Wew... nama gw Agung sob.. kenapa pake panggil nenk??? wkwk
artikel yg sangat bagus sob...
boleh dicoba ga ??
jangan lupa mampir ya..
nice
Cara ngerubah warna sebagian tulisan script yg ada dalam textarea gmna ya sob??
klo ada mohon dsamperin caranya ke blog saya sob..:)
nice info, thq kk
Post a Comment