Modifikasi Textarea dengan Kode CSS

Modifikasi Textarea dengan kode CSS. Setiap ilmu pasti berkembang. Demikian halnya dalam dunia blogger, banyak sekali aplikasi atau gadget-gadget yang dapat dimodifikasi. Textarea salah satunya bisa kita modif dengan penambahan kode css yang dapat mempercantik tampilan textarea pada blog kita. Pada tips kali ini kita akan memodifikasi tampilan textarea dengan penambahan css buttom 2 sebagai pengganti textarea yang akan dimodifikasi. Pada tips membuat textarea pada umumnya hanya menggunakan tag <textarea> nya saja, dimana tampilannya hanya terlihat sederhana seperti di bawah ini:

TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger TIPS untuk Bogger

Pada prisipnya penggunaan kode html pada textarea di atas adalah dengan meletakkan kode html di bawah ini pada tempat yang akan kita tampilkan kotak textareanya.

<form name="Dalang Error">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div>
<div align="center">
<textarea name="txt" style="height: 50px; width: 300px;">isi text area</textarea></div>
</form>

Nah itu hanya menampilkan tampilan textarea yang sangat sederhana. Supaya tampilan textarea pada blog anda kelihatan elegant, jadi perlu kita modifikasi sedikit dengan penambahan kode css pada template blog anda. Untuk lebih jelasnya seperti apa hasil editan (modifikasi) dari tampilan textarea ini, silahkan sobat blogger lihat sontohnya.

DEMO

Langsung saja kita pada tujuan kita, dimana kita akan memodifikasi tampilan textarea yang sederhana tadi dengan menambakhan script css buttom 2 sebagai pengganti kode textarea yang akan dimodifikasi. Kodenya seperti di bawah ini.

=================================================================

css buttom 2

=================================================================

.tombol2 {
color:#575757;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow: 0px 1px 0px #B0B0B0;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #8c8a8c;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #c9c9c9;
-moz-box-shadow:inset 0px 1px 0px 0px #c9c9c9;
box-shadow:inset 0px 1px 0px 0px #c9c9c9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9c9c9c), color-stop(1, #787678) );
background:-moz-linear-gradient( center top, #9c9c9c 5%, #787678 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9c9c9c', endColorstr='#787678');
background-color:#9c9c9c;
}
.tombol2:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #787678), color-stop(1, #9c9c9c) );
background:-moz-linear-gradient( center top, #787678 5%, #9c9c9c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#787678', endColorstr='#9c9c9c');
background-color:#787678;
}
.tombol2:active {
position:relative;
top:1px;
}

Setelah menentukan css pengganti tampilan textarea sederhana tadi, sekarang kita akan menambahkan css textarea untuk memberikan tampilan dan bentuknya, disini saya menggunakan :hover untuk textarea, supaya ketika mouse mengarah pada textarea akan terjadi efek menyala (warna putih), script css textarea-nya seperti dibawah ini :

=================================================================

css Textarea

=================================================================

textarea {
background:#808080;
width:400px;
height:100px;
color:ccc;
padding:10px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:3px dotted #9c9c9c;
}
textarea:hover {
box-shadow:0px 0px 25px #fff;
}

Tulisan yang berwarna merah adalah ukuran dari kotak textarea tersebut. Silahkan anda ganti sesuai dengan keperluan anda.

=================================================================

Menerapka Modifikasi TextArea

=================================================================

Sekarang adalah bagaimana kita menerapkan tampilan teatarea yang telah kita modifikasi pada blog kita. Langkahnya sangat mudah, anda tingga masuk ke Blogger.com dengan account anda. Setalh itu silahkan menuju Template, Edit HTML blog anda. Kemudian silahkan letakkan kode css buttom2 dan css TextArea di atas kode ]]></b:skin> . Setelah itu silahkan Simpan Template blog anda.

Langkah selanjutnya adalah, silahkan anda beralih dari Edit HTML. Sekarang terserah anda mau meletakkan dimana textarea yang akan anda tampilkan pada blog anda. Caranya adalah tinggal meletakkan kode berikut ini:

<form name="Dalang Error">
<div align="center">
<input class="tombol2" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div>
<div align="center">
<textarea name="txt">isi text area</textarea></div>
</form>

Silahkan anda ganti tulisan berwarna merah dengan isi textarea anda.

Jika kalian tidak ingin menempatkan script css didalam template, kalian bisa menggabungkan seluruh script css dan script textarea menjadi satu dengan menjadikan script css tersebut menjadi style html dengan menambahkan kode <style type="text/css">...<style> sehingga keseluruhan kodenya menjadi seperti ini :

<style type="text/css">
...css buttom 2...
<style>
...css textarea...

Semoga tips yang saya berikan kali ini bermanfaat dan mohon maaf jika ada kesalahan.(Jkt/2012)
Sumber: Kang Dadang