TEXT AREA

Cara Membuat Textarea Penuh Pesona

Login to blogger.
KLIK link "Design (Rancangan)".
KLIK link "Edit HTML".
Cari kode ]]> .
Copy dan patekan kode CSS textarea di atas kode ]]>.
KLIK "SAVE Templates (Simpan Template)".
Lanjutkan dengan cara menggunakan xHTML textarea.
Bila belum jelas urutan dan cara melakukan penyimpanan kode, buka "Special Tutorials" yang di dalamnya terdapat tutorial cara cepat cari kode HTML dan Cara lengkap melakukan penyimpanan kode CSS, xHTML, Javascript di blog (template).

Kode CSS Textarea Penuh Pesona

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 Penuh Pesona

Gunakan kode HTML berikut saat digunakan di halaman posting atau melalui "Add Gadget".
<textarea class="GReterea" row="6" cols="60">
Tuliskan Teks atau Kode HTML di sini !
</textarea>
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;

Contoh bentuk kode HTML berikut isi dalamnya.

Silahkan di copy untuk percobaan.

<textarea class="GRetarea" rows="6" cols="60">Bosses can have personal chats on their mobile phones for hours, but all eyes are on the workers if their phones ring. Bosses arrive late, leave early and take long lunch breaks, but workers have to watch the clock. When Bosses make mistakes, they frame them as the company's mistakes. When workers make the same mistakes, their careers are on the line.
<style type="text/css">
.box { width: 200px; height: 100px; padding: 10px;border: 2px solid blue; margin: 10px auto; }
</style>
<script src="http://djati.net/javascript/gubhugreyot/js/tip.js" type="text/javascript"></script>
</textarea>

D E M O