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. Gimana ........? Keren, bukan ...........????!

MODEL 1 (SATU), TANPA SELECT ALL :

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

MODEL 2 (DUA), DENGAN SELECT ALL :

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

Mau tahu cara membuatnya? Mau tahu??? Ikutilah langkah yang berikut ini :

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 demikian adanya.

Copy kode berikut dan masukkan dalam postingan Anda
untuk menempatkan teks atau kode-kode 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.

Selamat mencoba dan tetap good luck!