Cara Membuat Text Area (Rounded Corner)

Kali ini Saya akan memberitahu cara membuat text area rounded corner.

Tanpa berlama-lama langsung ikuti cara di bawah ini ↓

► Login ke blogger.com, jika sudah,

►Pilih Template → Edit HTML → Expand Template Widget

►Cari Kode ]]></b:skin> agar mudah mencari tekan (ctrl+f)

►Copy Kode CSS di bawah ini dan letakkan di atas ]]></b:skin>

Demo atau contoh

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

►Simpan dan ikuti langkah selanjutnya

►Masuk ke Tata Letak → Tambah Gadget → pilih HTML/JavaScript

►Copas script di bawah ini ke dalam kotak ↓

<textarea class="WArarea" row="6" cols="60">
TEKS ANDA DISINI
</textarea>

►Simpan dan lihat hasilnya


Selamat Mencoba !