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.

Leave a Reply

Leave Your Comments Here, Hope you found what you need here. Thanks and happy blogging.

Tab 1.2
Tab 1.3
Submit your site to Google Search
Submit your site to Yahoo
Submit your site to MSN

Enter your email address:

Delivered by FeedBurner

Aandfx | Edited by | Black Neon Template