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

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.


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,

32 Diskusi untuk Css Textarea Untuk Modifikasi Textarea Dengan Baik

12 Juni 2012 20.37  

Wooow saya ga ngerti boss aah caranya maklum ooot hehehehehhe

19 Juni 2012 12.37  

@Military ZoneHehehehehe saya sudah cukup mengerti sie.....? :D

19 Juni 2012 16.32  

semua tutorial disini bauagus banget bos... saya pengen bs buat css, yang template seperti ini tapi gak ada template gratis

21 Juni 2012 19.34  

saya sering menggunakan text area untuk meletakkan script di dalam postingan
thanks buat script di atas

25 Juni 2012 11.59  

mantap om,,,
kapa-kapan mampir ke blog ane donk om

28 Juni 2012 09.50  

kunjungan perdana di blog dengan tampilan sangar!

13 Juli 2012 16.18  

Nice Nih...udah lama g mampir k sini nih...
Makin Nice aja....

Salam Kenal

24 Juli 2012 15.57  

bagus mas, tapi kalo tanpa bottom scroll bisa ?

9 Agustus 2012 00.28  

keren juga artikelnya gan .. thanks ya ..!!

http://dyan-seller.blogspot.com

14 Agustus 2012 10.13  

wah.. keren artielnya sob... di coba dulu..

14 Agustus 2012 23.19  

terima kasih mas Dalang :D
blog saya terinspirasi oleh blog mas dalang....
hampir semua ilmu saya daparkan dari mas dalang :D

20 Agustus 2012 18.48  

Ma kasih mas dalang,, Segera ke TeKaPe

31 Agustus 2012 01.58  

beuh mantap benerrr

3 September 2012 19.29  

Kalai boleh tau nama template originalnya apa ?

2 Oktober 2012 18.50  

keren mas blognya,,,tapi nggak responsive ya
kalo di responsivekan pasti mantep...

7 Oktober 2012 22.59  

@The7BloggersTernyata sudah lama tak update nie mas dalang.......

25 Oktober 2012 15.27  

disimak dulu ah...
artikelnya bagus dan keren.

12 Desember 2012 01.13  

Thanks sharingnya, gan!
Salam kenal...Kalau berkenan mau ngundang untuk ikutan gabung dengan teman-teman lain yang sudah SUBMIT URL BLOG-nya ke Direktori Weblog Indonesia :)

15 Desember 2012 10.45  

Bantuin ane dunk mas...kemaren coba memasang kode JQuery,komentar teman2 di bawah posting itu malah hilang...dimohon pencerahannya...

4 Januari 2013 18.33  

Mungkin perlu di beri penjelasan lebih lanjut.... atau di tambahkan tutorial yang langsung bisa untuk widget tanpa perlu masuk halaman pengeditan template

17 Januari 2013 15.20  

sumpeh tumpeh gan...
keren2 banget tipsnya

19 Maret 2013 14.03  

wah mantep nih tutorialnya, apalagi templatenya, minta donk..??

25 Maret 2013 06.26  

blogwalking kawan!

nice post
Aan Shared

15 April 2013 02.33  

Sangat Bermanfaat sekali pakde.. swun

3 Juni 2013 14.29  

saya mau nanya nih mas, gimana caranya bikin ukuran kotak postingan pada post page beda dengan home page? jd klo postingan dibuka ya cuma ada artikelnya aja. klo cara ilangin widget saya udah belajar dr blognya si mas. cm skrg gmna cara membedakan lebarnya itu...

12 Juli 2013 15.57  

sy ngurangi penggunaan jquery, css sob. sy pengen bikin blog sy minimalis. agan bisa bantu gak, gimana cara ngurangi tinggi body tampak muka blog? soalnya di template sy seperti ada ruang kosong. nah itu pengen sy kurangi. thanks sob

21 Agustus 2013 14.55  

nice gan, website nya ampuuun dah kerennya kebangetan gan ^_^
kalau bolehtau ini template apa namanya gan..???

salam damai..

31 Desember 2013 09.53  

test

25 Agustus 2014 15.27  

thanx gan code codenya brooo

http://catatansutradaragokil.blogspot.com/

2 Desember 2014 13.05  

keren blognya

Poskan Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

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