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">
.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 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="bukarahasia-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".

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

Membuat Textarea 3D Cantik di Blogger/Blogspot: (Light-Yellow)
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 11 Comment(s):

Share With Irfan said...

Di bookmark dulu nih artikel, tipsnya bagus sekali.

Ahmad Khoirul Azmee said...

yup, silakan saja :D

blogadexme said...

Trima kasih ya mas sudah mmbantu...sngat bermanfaat..umpan balik mas :
http://blogadexme.blogspot.com

Krisna 'Law' said...

saya mau nanya, cara agar warna teks di text area berbeda bagaimana? misal yang lain hitam, terus ada satu kata yang warnanya merah, bagaimana?

Vivalia said...

makasih. tutorialnya

agus KBM said...

blog makmin indah bila pasang text area gan
makasih ya atas infonya

wanbule said...

Thanks Infonya gan......
Nice
http://www.wanbule.com

Bom Bom said...

thanks....mau usaha tanpa ribet...klik http://tempatkursuskueroti.blogspot.com

samson said...

nice posting guys :)

ichi hikaru said...

sip kang ... cuman saya mo nanya nih ,.... tolong di bales yah ,via email kalo bisa .. itu buat bikin contoh script yang bentuknya kya gitu gimana caranya yak .. trus bikin widget featured post nya juga gimana ? thanks sebelumnya

email aldo_vertigo@yahoo.com

imron beny said...

mantap ttorialnya sob

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap