Membuat Textarea 3D Bagus Di Blogger/Blogspot: (Light-Yellow) - Pendidikan Blog

Textarea merupakan bab dari form yang berfungsi selaku space/ruang bagi teks/konten khusus yang ingin diberi posisi/penempatan tertentu. Ada banyak jenis textarea menurut fungsi form, yakni untuk mengisi data, submission/pendaftaran, polling, search, dan lain-lain. Namun pada posting kali ini akan dikhususkan pada texarea yang berfungsi selaku space bagi konten tertentu untuk digunakan olh hadirin dan bersifat read-only, baik pada posting blog/website maupun pada widget/sidebar.

Pada posting terdahulu, aku pernah menyebarkan ihwal textarea sederhana dengan memakai tag div dan beberapa hukum CSS yang sederhana pula. Di posting ini, aku share textarea dengan tag originalnya (textarea tag) dan beberapa sentuhan style CSS3. Posting ini akan dilanjutkan dengan posting-posting berikutnya ihwal textarea dengan aneka macam macam styling yang nantinya sanggup diseleksi dan diadaptasi dengan warna dan template blog sehingga akan terlihat lebih indah.

Dasar tag textarea adalah:

<textarea>teks/konten disini</textarea>

Nah, dengan memasukkan beberapa atribut dan style CSS, kita sanggup mempercantik performa textarea tersebut. Contoh

<textarea style="width: 300px;height:60px; border:1px solid red;" readonly="readonly">teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini</textarea>

Hasilnya: 
teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini

Itu merupakan sebagian pola sederhana styling pada text area. Selanjutnya berikut merupakan textarea dengan memakai styling CSS3 yang sedikit agak rumit. Anda sanggup meenggunakan script/kodenya di blog anda dan mengerjakan beberapa kostumisasi sesuai kebutuhan.

Textarea: LightYellow 3D Hover Effect With Shadow (CSS3 Styling):

teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini

Cara membuatnya:

1. Copy isyarat CSS berikut:

<style type="text/css">
.bukarahasia-textarea1 {padding:3px;margin:0;width:400px;height:60px;color:#FFCC00;font:12px arial;background:#000;border:2px outset #FFCC00;-moz-box-shadow: 7px 7px 3px #888;-webkit-box-shadow: 7px 7px 3px #888; box-shadow: 7px 7px 3px #888;}
.bukarahasia-textarea1:hover {color:#FFFF00;border:3px double #FFB200;-moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0;"}
</style>

Kostumisasi: atur nilai width (lebar) dan height (tinggi) sesuai dengan keinginan.

2. Jika ingin memakai textarea yang serupa pada semua posting/widget, paste isyarat CSS tersebut sempurna di atas </head> pada edit HTML template kemudian save.

3. Jika ingin memakainya pada satu posting saja, masukkan isyarat CSS di bab bawah posting lewat santapan Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) atau HTML/Javascript pada widget.

4. Kopi isyarat HTML berikut:

<textarea class="bukarahasia-textarea1" readonly="readonly">teks/konten textarea disini</textarea>

5. Ganti teks/konten textarea disini dengan konten anda. 

6. Masukkan ke editor posting lewat melalui santapan Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) HTML/Javascript pada widget dimana anda sebelumnya sudah memasukkan isyarat CSS.

7. Done. Anda sanggup mempreviewnya pribadi lewat "compose".

Wait for other beautiful textarea designs from Tips-Tricks Blogger!
mencuri merupakan pekerjaan pengecut! © buka-rahasia.blogspot.com