Membuat Text Area Paling Keren 4

Sebelumnya blog ini telah membuat tutorial tentang
Text Area setidaknya sudah 3 (tiga) seri. Berlanjut
pada seri yang ke-4 (empat) mudah-mudahan
ini dapat menambah koleksi Text Area Anda
sehingga membuat blog Anda semakin " berselera ".

Saya yakin Anda suka. Kenapa ?! Coba saja arahkan
cursor Anda pada contohnya di bawah ini.
Keren, bukan ......................?????!

MODEL 1 (SATU), TANPA SELECT ALL :

Sebelumnya blog ini telah membuat tutorial tentang Text Area setidaknya sudah 3 (tiga) seri. Berlanjut pada seri yang ke-4 (empat) ini mudah-mudahan dapat menambah koleksi Text Area Anda sehingga membuat blog Anda semakin " berselera ".

MODEL 2 (DUA), DENGAN SELECT ALL :

Sebelumnya blog ini telah membuat tutorial tentang Text Area setidaknya sudah 3 (tiga) seri. Berlanjut pada seri yang ke-4 (empat) ini mudah-mudahan dapat menambah koleksi Text Area Anda sehingga membuat blog Anda semakin " berselera ".

Mau tahu cara membuatnya? Ikuti langkah yang berikut :

1.   Masuklah ke Edit HTML.

2.   Cari tag </b:skin>

3.   Copy kode berikut lalu letakkan
      di atas atau sebelum tag </b:skin> ini,
      kemudian simpanlah template Anda.

textarea.exclusive {
font-size: 14px;
font-family: courier, Verdana;
border: 0px solid #000;
outline: 1px;
border: 5px solid; 
border-color: #ff00ff #9900ff #9900ff #ff00ff;
border-radius: 15px; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px;      
background: #FFFFFF; 
box-shadow: -1px -1px 3px #0000ff, 1px 1px 3px #9900ff, 1px 1px 15px #0000ff;  
-moz-box-shadow: -1px -1px 3px #00ffff, 1px 1px 3px #00ffff, 1px 1px 15px #0000ff; 
-webkit-box-shadow: -1px -1px 3px #0000ff, 1px 1px 3px #9900ff, 1px 1px 15px #0000ff;
text-shadow: 1px 1px 1px #999999; 
padding: 5px 5px 2px; 
color: blue; 
margin: 15px 5px;
-o-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;    
}

textarea.exclusive:hover {
border-color: #ffff00 #0000ff #ff0000 #00ff00;
border-radius: 15px; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px;      
background: #ffffff; 
color: black;
text-shadow: 1px 1px 1px #999999;
box-shadow: -1px -1px 3px #ff0000, 1px 1px 3px #ff0000, 1px 1px 15px #9900ff;  
-moz-box-shadow: -1px -1px 3px #ff0000, 1px 1px 3px #ff0000, 1px 1px 15px #9900ff; 
-webkit-box-shadow: -1px -1px 3px #ff0000, 1px 1px 3px #ff0000, 1px 1px 15px #9900ff;
}

KETERANGAN :

Aturlah ukuran dan jenis huruf dan sebagainya.

Tapi bila Anda tak mau repot, biarkan saja

kode tersebut apa adanya.

Copy kode berikut dan masukkan dalam postingan
Anda untuk menempatkan teks atau kode-kode
apa saja yang Anda miliki.

KODE UNTUK MODEL 1 (SATU) :

<textarea class="exclusive" style="padding: 5px; 
width: 340px; height: 100px;" name="txt">TEKS DI SINI</textarea>

KODE UNTUK MODEL 2 (DUA) :

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:
this.form.txt.focus();this.form.txt.select();" type="button"; border:1px/></div>
<p style="text-align: left;"><textarea class="exclusive" style="padding: 5px; 
width: 340px; height: 100px;" name="txt">TEKS LETAKKAN DI SINI</textarea></p></form>

KETERANGAN :

Sesuaikan ukuran width dan heightnya

dengan ukuran yang Anda kehendaki.

Masukkan teks atau kode Anda pada

tempat yang tersedia.

Pastinya Anda suka dan tetap good luck!