Cara membuat textarea indah, cantik dan mempesona di blog

Textarea bukan sebuah box sederhana saja yang sekedar tampil apa adanya untuk wadah link exchange, banner exchange atau kode html dan teks yang lain. Dengan sedikit polesan bedak berupa kode CSS dan CSS3, tak seorangpun akan menduga bahwa yang mereka lihat adalah sebuah textarea. Anda dapat menggunakan textarea penuh gaya ini di blog untuk wadah baru yang tampil indah, cantik dan mempesona.

Menghilangkan border bawaan yang berupa warna border dan tebal border, serta menghilangkan outline menjadi kunci hingga textarea menampilkan diri dalam perwujudan yang berbeda. Tentu saja itu tak cukup. Kode CSS dan CSS3 menejadi baju baru yang menjadikan textarea seakan baru keluar dari salon dengan dandanan yang serba"wah" dan penampilan "elegan, manis dan cantik.
Kita akan gunakan CSS3 border-radius, CSS3 drop shadow (box shadow), CSS3 text-shadow, CSS3 text-shadow, CSS3 Transition serta beberapa kode CSS seperti margin, padding, border dan outline. Mengapa kita gunakan "outline"?

Outline: none; berfungsi untuk melenyapkan border yang muncul ketika bagian di textarea "di klik", baik untuk copy code ataupun sekedar sebuah "klik" tak sengaja. Tanpa menghilangkaan "outline" tentu saja bagi beberapa yang tahu kode html akan segera sadar bahwa apa yang di hadapannya adalah sebuah textarea. Sampeyan bisa tambahkan atau rubah beberapa kode CSS yang disertakan di sini bila ingin membuat textarea ini tampil dengan gaya yang berbeda.

Cara Membuat textarea indah, cantik dan mempesona:

Login to blogger.
KLIK link "Design (Rancangan)".
KLIK link "Edit HTML".
Cari kode ]]></b:skin> .
Copy dan patekan kode CSS textarea di atas kode ]]></b:skin>.
KLIK "SAVE Templates (Simpan Template)".
Lanjutkan dengan cara menggunakan xHTML textarea.

Kode CSS textarea indah, cantik dan mempesona:

textarea.GRetarea {
       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.GRetarea: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;
}

Cara menggunakan textarea indah, cantik dan mempesona:
Gunakan kode HTML berikut saat digunakan di halaman posting.

<textarea class="GReterea" row="6" cols="60">
Tuliskan Teks atau Kode HTML di sini !

Catatan :

Textarea berfungsi sebagai wadah teks dimana semua bentuk teks akan di tampilkan apa adanya, termasuk kode HTML. Jadi bila sampeyan menuliskan kode berbentuk seperti ini : <style typt="text/CSS"> maka dalam box textarea akan terlihat seperti itu juga (ditampilkan apa adanya sesuai yang dituliskan).
row="6" adalah ukuran tinggi textarea. Rubah nilainya untuk merubah ketinggian textarea ;Semakin kecil akan semakin pendek, sedang apabila diperbesar akan semakin tinggi.
cols="60" adalah ukuran lebar. Semakin besar semakin lebar dan sebaliknya bila diperkecil maka akan semakin berkurang lebarnya.
Ukuran text dapat dirubah dengan merubah nilai pada : font-size: 14px;

Semoga bermanfaat...

Anda menyukai postingan diatas? Silahkan di share.

Post Author

jalupangna

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

Cara membuat textarea indah, cantik dan mempesona di blog

jalupangna

3 komentar