English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified

Kamis, 05 Mei 2011

Membuat Text Area (Rounded Corner)

Text Area - Sehabis jalan jalan tanpa sengaja saya melihat di salah satu blog teman ada jenis text area yang unik dan cantik. Setelah saya lihat dan utak atik ternyata bagus juga, tanpa basa basi saya langsung praktek eh ternyata berhasil dan hasilnya pun lebih bagus daripada text area yang biasa. mantebh deh pokonya. Coba dan lihat saja hasilnya.. hmmmm .. ya wes langsung ke Kamar Bedah HTML wae jek...

Text Area Rounded Corner

1. Masuk Blogger
2. Pilih Rancangan/Design
3. Pilih EditHtml dan Centang "expand Template widget"
4. Cari Kode  ]]></b:skin>
5. Copy Kode CSS di bawah ini dan letakkan di atas  ]]></b:skin>

textarea.WArarea {
font-size: 14px;
font-family: Arial, Tahoma, Helvetica;
border: 0px solid transparent;
outline: none;
border: 5px solid;
border-color: #ccc #aaa #aaa #ccc;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
background: #eee;
box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;
-moz-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;
-webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;
text-shadow: 1px 1px 1px #666;
padding: 5px 5px 2px;
color: #625F3C;
margin: 15px 5px;
-o-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
textarea.WArarea:hover {
border-color: #aaa #888 #888 #aaa;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #fff;
color: #111;
text-shadow: 1px 1px 1px #aaa;
box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
-moz-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
-webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
}
6. Save
7. Masuk Rancangan/Design >> Laman Elemen/Add Page Elemen
8. Tambah Gadget/Add Gadget >> Pilih HTML/JavaScript
9. Copy kode di bawah ini dan letakkan di dalamnya
<textarea class="WArarea" row="6" cols="60">
TEKS ANDA DISINI
</textarea>
10. Save

Silahkan Di coba anda juga bisa utak atik lagi dengan kreasi anda, yang jelas apapun kreasi anda itu merupakan hal terbaik yang pernah anda lakukan. Mudah mudahan bermanfaat dan gampang ntuk di pahami. 

1 komentar:

Silahkan Tinggalkan Komentar Anda, Terima Kasih Atas Kunjunganya.

Jika Anda Tertarik Dengan Semua Artikel Di Dalam Blog Ini, Silahkan Masukan Email Anda Pada Kolom Di Bawah Ini. Terima Kasih Atas Kunjungan Dan Partisipasinya

Delivered by FeedBurner

 
Yahoo bot last visit powered by MyPagerank.NetMsn bot last visit powered by MyPagerank.Net
Ratified.org PhilippinesPersonal - Top Blogs Philippines Free SEO Tools
Ping your blog, website, or RSS feed for Free
Bloggers - Meet Millions of Bloggers