Teks Rata

• Menu
  • RSS
  • Contact
  • Home

skip to main | skip to sidebar

Situseo Blog

Desain dan modifikasi template blog supaya menghasilkan tampilan desain blog yang berbeda dan independen dengan menerapkan efek animasi css3 dan jquery serta script lainnya supaya seo friendly dimata mesin pencari

• Category
• Sample
• Color Tools
• Parse

June 12, 2012

Css Textarea Untuk Modifikasi Textarea Dengan Baik

Situseo Blog : Modifikasi TextArea Dengan Css TextArea, textarea merupakan tempat atau ruang yang bisa digunakan untuk meletakan teks atau script, untuk sekarang ini tag <textarea> sudah jarang dipergunakan, entah apa alasannya, tapi yang pasti jika peletakan dan tampilan textarea sesuai dengan kegunaanya tentu hal ini akan membantu fungsi dan tampilan dari blog bersangkutan.

Tag textarea dengan tambahan javascript(js) tentunya akan menghasilkan sistem kerja yang lebih baik, seperti pada postingan terdahulu mengenai Macam sistem text area dengan tambahan javascript, pada postingan tersebut ada yang menggunakan tombol untuk menyeleksi semua isi textarea, karena menurut saya tampilan textarea lebih baik menggunakan tombol, maka saya berusaha merubah tampilan textarea plus tombol tersebut dengan menggunakan tambahan css textarea.

Textarea merupakan tag html, maka penggunaan css textarea tidak mengunakan selector class, id dll, seperti halnya css table yang juga merupakan tag html tidak menggunakan class atau id, script textarea yang menggunakan tombol (dengan tambahan javascript) adalah seperti ini :

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

Dengan berdasar pada postingan sebelumnya mengenai macam aneka warna tombol dengan css, saya akan menggunakan script css tombol tersebut untuk merubah tampilan tombol penyeleksi texarea, jika penasaran seperti apa hasilnya, kalian bisa melihat contoh demo debngan meng-klik link demo dibawah ini.

Demo

Tidak berlama-lama kita langsung saja ke tujuan, untuk menyesuaikan dengan warna template yang saya pergunakan, saya menggunakan script css button 2 sebagai pengganti tombol textarea yang akan kita modifikasi, script css button 2 tesebut seperti ini :

Css Button 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 tombol untuk mengganti tombol default untuk textarea, 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;
}

Setelah semua css untuk textarea ataupun css untuk tombol kita tentukan, proses selajutnya kita letakan semua script css tersebut pada tempatnya.

Menerapkan Modifikasi Tampilan TextArea Dan Tombol

Masuk pada menu Template - Edit HTML dan letakan semua script css tersebut diatas kode ]]></b:skin> kemudian save template kalian, dan letakan script textarea dengan tambahan tombol tersebut ditempat yang kalian inginkan.

Script textarea sudah mengalami perubahan dengan tambahan selector class untuk bagian tombolnya, sehingga script textarea-nya menjadi seperti 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>

Caba bandingkan script awal textarea dengan script text area yang sudah dimodifikasi, pada script text area yang sudah dimodifikasi menghilangkan style css yang ada, sebagai gantinya adalah css textarea.

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">
...script css...
<style>
...script textarea...

Semoga kedua cara tersebut bisa membantu dalam memberikan tampilan yang elegan terhadap textarea yang kalian pergunakan.

Semoga bermanfaat,

Subscribe to: Post Comments (Atom)

Follow Me

Follow @MasDalang

Random Posts

Recent Posts

Apa Kata Mereka

Guest

Military Zone

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top