Cara Membuat Text Area Pada Postingan Blog

Cara Membuat Text Area Pada Postingan Blog

Kali ini saya akan menshare trik blog, yaitu Cara Membuat Text Area di postingan blog. Sebenarnya ini sudah familiar di publik, tapi kali ini saya akan mengulas dan menshare untuk pemula(Newbie). Anda tinggal Copy & Paste saja. Simple kan?

Untuk memudahkan anda memahami Text Area, berikut adalah kode dasar atau standar untuk membuat text area :

<textarea>isi dari teks area</textarea>

Maka tampilannya nanti akan seperti ini :

isi dari teks area


● Membuat Text area dengan tombol highlight

<*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: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Masukkan Text Sobat Disini</*textarea></p> </div> </form>


NB : Hapus semua tanda * (bintang),Maka hasilnya akan seperti text area di bawah

Masukkan Text Sobat Di Sini

● Membuat text area terblok semua saat di sorot mouse

<*div> <form name="tamboenman"> <div align="center" style="margin-bottom: 0pt; margin-top: 0pt;"> <textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" rows="100" style="height: 50px; width: 300px;">coba sobat arahkan mousenya ke teks ini !!</*textarea></div>

NB : Hapus tanda * (bintang), hasilnya akan tampak seperti ini

coba sobat arahkan mousenya ke teks ini !!

● Membuat text area tidak bisa di hapus :

<textarea rows="2" cols="35" onclick="this.focus(); this.select();" readonly="">Coba klik text area ini kemudian hapus, hasilnya nihil. Coba hapus text arae di atas pasti terhapus.</textarea></div>

Coba sobat klik text area ini kemudian sobat hapus, hasilnya nihil. Coba sobat hapus text arae di atas pasti terhapus.

*. Agar text area yang anda buat tidak bisa terhapus, anda hanya perlu menambahkan kode readonly="" sebelum kode >text yang akan muncul . . . .</textarea></div>

● Berikut ini macam macam gaya text area :
1. Normal Text Area

<*textarea name="text1" cols="60" rows="4">TEXT DISINI<*/*textarea>


2. Text Area Dashed
<*textarea name="code" rows="3" cols="60" style="background:#daffbf;color:#295F00;border:2px #295F00 dashed;line-height:1.5em;padding:5px;">ISI TEKS/KODE<*/*textarea>


3. Text Area Dotted

<*textarea name="code" rows="3" cols="60" style="background:#ef0090;color:#FFEFF9;border:3px dotted #FFEFF9;line-height:1.5em;padding:5px;">ISI TEKS/KODE<*/*textarea>


4.  Text Area border Warna-Warni
<*textarea name="code" rows="3" cols="60" style="background:#bffaff;color:#FF0000;border-bottom:4px solid #40FF1F;border-right:4px solid #40FF1F;border-top:4px solid #FFE900;border-left:4px solid #FFE900;line-height:1.5em;padding:5px;">ISI TEXT/KODE<*/*textarea>


5. Text Area + Border
<*textarea name="code" rows="3" cols="60" style="background:#fbefff;color:#CA3DD9;border:1px solid #CA3DD9;border-left:20px solid #CA3DD9;line-height:1.5em;padding:5px;">ISI TEXT<*/*textarea>


6. Text area berBackground
<*textarea name="code" rows="3" cols="60" style="background:#000;color:#fff;border:2px inset #ccc;line-height:1.5em;padding:0 7px;">ISI TEXT/KODE<*/*textarea>


7. Text Area + Background
<*textarea name="emsite2" rows="3" cols="10" style="background:#305F00;color:#fff;border:2px inset #003c1f;line-height:1.5em;padding:0 7px;"> ISI TEXT/KODE <*/textarea>


8.  Text Area + Border Dotted
<*textarea name="emsite6" rows="6" cols="60" style="background:#44b4ff;color:#fff;border:3px dotted #0472e8;line- height:1.5em;padding:5px;">ISI TEXT/ CODE<*/textarea>

NOTIFICATION !
- Hapus tanda "*" (bintang) agar Text area berhasil
- cols = Lebar dan rows = Tinggi bisa anda ubah(ukuran)
- Background & Color bisa anda rubah dengan code COLOR HTML
sekian postingan dari saya.

Share :

You may like these posts: