Membuat Textarea 3D Cantik di Blogger/Blogspot: (Light-Yellow)

 

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


Pada posting terdahulu, saya pernah berbagi tentang textarea sederhana dengan menggunakan tag div dan beberapa aturan CSS yang sederhana pula. Di posting ini, saya share textarea dengan tag originalnya (textarea tag) dan beberapa sentuhan style CSS3. Posting ini akan dilanjutkan dengan posting-posting selanjutnya tentang textarea dengan berbagai macam styling yang nantinya dapat dipilih dan disesuaikan dengan warna dan template blog sehingga akan tampak lebih indah.


Dasar tag textarea adalah:
<textarea>teks/konten disini</textarea>
Nah, dengan memasukkan beberapa atribut dan style CSS, kita dapat mempercantik tampilan 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: 






Itu adalah sebagian contoh sederhana styling pada text area. Selanjutnya berikut adalah textarea dengan menggunakan styling CSS3 yang sedikit agak rumit. Anda dapat meenggunakan script/kodenya di blog anda dan melakukan beberapa kostumisasi sesuai kebutuhan.





Cara membuatnya:
1. Copy kode CSS berikut:
<style type="text/css">


.titaniccyber-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;}

.titaniccyber-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 menggunakan textarea yang sama pada semua posting/widget, paste kode CSS tersebut tepat di atas </head> pada edit HTML template kemudian save.
3. Jika ingin memakainya pada satu posting saja, masukkan kode CSS di bagian bawah posting melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) atau HTML/Javascript pada widget.
4. Kopi kode HTML berikut:
<textarea class="titaniccyber-textarea1" readonly="readonly">teks/konten textarea disini</textarea>
5. Ganti teks/konten textarea disini dengan konten anda. 
6. Masukkan ke editor posting melalui melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) HTML/Javascript pada widget dimana anda sebelumnya telah memasukkan kode CSS.
7. Done. Anda dapat mempreviewnya langsung melalui "compose".

Postingan terkait:

Belum ada tanggapan untuk "Membuat Textarea 3D Cantik di Blogger/Blogspot: (Light-Yellow)"

Poskan Komentar

> Jika Artikel ini Membantu , Silahkan tinggalkan Komentar Anda
> Jika ingin menuliskan Kode-kode blog , jangan sekali-kali menulisnya dengan lengkap , Karena kodenya tidak akan muncul.
> U Comment I Follow !!!
> (Comment Use Emoticons, Copy Paste this code example: 13 or the other to the column comments)
> "No Spam"
> Do not Forget Leave Your Comment Here ...
> I Highly Appreciate your comment. This blog has been Dofollow.
> Komentar yang masuk SPAM tidak saya hapus dan saya akan Follow (jika link ada)

Follow Blog ini jika ingin mendapatkan informasi paling update