Cara Membuat Textarea Menarik

Cara membuat textarea - suatu hal yang penting untuk tetap membuat posting blog menarik dan atraktif saat dibaca oleh pengunjung dan indah ketika dipandang, pada kali ini yang saya akan membahas cara membuat kotak textarea dengan beberapa kostimisasi agar lebih terlihat atraktif dan menarik dengan memberikan sentuhan kostimisasi dengan css,

Apa sih kegunaan dari kotak textarea

sebenarnya banyak kegunaan dari kotak textarea pada blog. terlebih lagi bagi para bloger yang menyediakan tutorial blog dengan penulisan script atau kata-kata yang panjang dan disinilah peran penting kotak textarea, dengan mengunakan kotak textarea tutorial script yang tadinya panjang dan memakan waktu yang lama untuk meloading isi artikel hanya dengan mengunakna kotak textarea script bisa tertampung dalam kotak scrol yang bisa diatur tinggi  lebarnya juga posisi penempatannya yang membuat isi artikel lebih rapih dan enak dipandang. berikut bebrapa gaya textarea.

1. Textarea default/bawaan
berikut ini adalah tampilan texarea secara dasar tanpa penambahan atribut apapun

ini merupakan contoh secara bawaan atau default dari textarea

<textarea>isi dari konten/atau kata-kata</textarea>

2. Textarea dengan penambahan atribut Html
berikut ini adalah tampilan textarea dengan menambahkan beberapa atribut html seperti height, width dan warna border

isi dari konten/atau kata-kata

<textarea style="width: 300px;height:60px; border:1px solid red;" readonly="readonly">isi dari konten/atau kata-kata</textarea>

3. Textarea dengan tombol select all

isi dari konten/atau kata-kata

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">isi dari konten/atau kata-kata</textarea></p></form>

4. Textarea dengan auto select


isi dari konten/atau kata-kata

<textarea onclick="this.focus();this.select()" onfocus="this.select()" onmouseover="this.focus()" readonly="readonly" rows="2" style="height: 50px; padding: 3px; width: 300px;">isi dari konten/atau kata-kata</textarea>

Cara penggunaan:

• metode penggunaan dari keempat textarea diatas, copy paste script di posting pada mode html
• ganti tulisan isi dari konten/atau kata-kata dengan kata-kata atau script yang ingin ditampilkan pada textarea
• jika ingin menampilkan script pada textarea convert terlebih dahulu script yang ingin ditampilkan dengan HTML encoder

5. Textarea dengan kustomisasi css
berikut ini adalah style dengan menggunakan sentuhan css pada textarea

isi dari konten/atau kata-kata
Untuk menggunakan textarea dengan kustomisasi css

• login ke blogger
• template >> edit html >> cari kode ]]></b:skin>
• copy css dibawah ini tepat diatas ]]></b:skin>

.depermana-textarea {
padding:0;
margin:0;
background: #fff;
width:400px;
height:40px;
color:#666;
font:12px arial;
border:1px dashed #289728;
}
.depermana-textarea:hover {
color:#289728;
border:2px solid #666;
}

Keterangan:
.depermana-texarea:hover adalah hasil saat sobat mengarahkan kursor pada texarea

• pada saat di posting gunakan mode hatml untuk memasukan kode texarea dibawah ini

<textarea class="depermana-textarea" readonly="readonly">isi dari konten/atau kata-kata</textarea>

Kustomisasi

• width: silakan sesuaikan lebar textarea yang sobat inginkan
• height: silakan sesuaikan tinggi texarea yang sobat inginkan
• font:12px: silakan sesuaikan dengan ukuran huruf pada textarea
• untuk menganti warna background dan warna text area sobat bisa mengunakan Table warna css/html
• untuk lebih mudah menkustomisasi textarea sobat dapat menggunakan HTML editor

help

bagi sobat yang ingin menanyakan sesuatu tidak usah ragu dan malu silakan tanyakan apa yang menjadi kendala sobat dikotak komentar, tolong ya like fp facebook dan langganan artikel dibawah ini jika artikel saya sedikit membantu, :D