Membuat Text Area dengan CSS3

By Rey 06:32 2 comments

Membuat Text Area dengan CSS3 - Assalamualaikum :D Setelah mendapat hidayah dari beberapa refrensi tutorial blog, kali ini saya akan membahas bagaimana cara membuat text area dengan CSS3.

Tanpa panjang lebar, rendah tinggi, dan lain lain, yuk kita mulai :D

1. Login Blogger.com

2. Klik Bagian Template > Edit HTML > centang Expand Widget Templates

3. Masukkan kode CSS berikut diatas kode ]]></b:skin>

textarea.CTextarea {
       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.CTextarea: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 editan diatas :D
Kemudian, tambahkan kode HTML pada postingan atau melalui " Add a gadget "

<textarea class="CTextarea" cols="80" rows="8" >
ISI Tulisan yang ingin sobat tampilkan di sini !!
CONTOH ~ Saya adalah cicak, saya adalah seorang newbie atau pemula dalam bloggin. Keinginan saya membantu para newbie seperti saya dalam kostumisasi blog mereka agar terlihat keren dengan membuat blog tutorial Artikel Kecil Blog tersebut adalah blog yang berisikan artikel, bacaan, tutorial, dan lain lain ^^
</textarea>

Simpan dan Lihat hasilnya. Untuk DEMO, sobat bisa melihat Textarea yang saya gunakan untuk menulis setiap script ^^

Keyword - Membuat Text Area dengan CSS3

2 comments for "Membuat Text Area dengan CSS3"

Widget Atas Posting

Membuat Text Area dengan CSS3

Keyword - Membuat Text Area dengan CSS3

2 comments for "Membuat Text Area dengan CSS3"