Cara Memodifikasi Tampilan Textarea Blog Dengan CSS Keren



Assalamualaikum Wr. Wb.

     Halo Sobat ^o^)~ bertemu lagi nih ;) kali ini saya ingin share tutorial blog, yaitu judul yang di atas :D sebelumnya sobat sudah tau belum apa itu Textarea ? Textarea adalah tempat atau ruang yang bisa digunakan untuk meletakan teks atau script. Untuk sekarang ini tag <textarea> sudah jarang dipergunakan, tidak tahu apa alasannya, tapi yang pasti jika peletakan dan tampilan textarea sesuai dengan kegunaanya tentu hal ini akan membantu fungsi dan tampilan dari blog bersangkutan. Untuk lebih jelasnya, di bawah ini adalah contoh dari textarea :



Bagaimana cara membuatnya supaya terlihat keren? Kita akan membuatnya keren dengan sentuhan Css. Bagaimana caranya? Langsung saja, berikut ini adalah caranya :
  • Masuk ke dasboard blog kalian
  • Buka Template, pilih Edit HTML
  • Masukkan kode Css di bawah ini tepat di atas kode ]]></b:skin>
textarea { background:#808080; width:400px; height:100px; color:ccc; padding:10px; border-radius:5px; border:2px solid #9c9c9c; } 
textarea:hover { box-shadow:0px 0px 25px #fff; }
  • Kemudian simpan
Keterangan :
Ganti kode yang berwarna MERAH dengan kode warna backgrond textarea yang kalian inginkan
Ganti kode yang berwarna KUNING dengan kode ukuran lebar textarea yang kalian inginkan
Ganti kode yang berwarna UNGU dengan kode ukuran tinggi textarea yang kalian inginkan
Ganti kode yang berwarna ORANGE dengan kode warna text dalam textarea yang kalian inginkan
Ganti kode yang berwarna PINK dengan kode ukuran kelengkungan border textarea yang kalian inginkan
Ganti kode yang berwarna BIRU dengan kode ukuran ketebalan border textarea yang kalian inginkan
Ganti kode yang berwarna AQUA dengan kode warna border textarea yang kalian inginkan
Untuk menggunakannya, kalian letakkan kode di bawah ini pada tempat yang kalian inginkan :

<textarea rows="3" cols="40" name="txt" onclick="this.form.txt.select()">ISI TEXAREA DISINI</textarea>

     Gimana ? mudah kan :) ya pastinya donggg Hahaha :D Sekian dulu pertemuan kita pada kali ini ;D sampai jumpa di postingan berikutnya ^o^)~

Wassalamualaikum Wr. Wb.


Sumber

Artikel Terkait

1 komentar:

  1. Thaks gan bermanfaat.. komback ya http://fariizza-fm.blogspot.com

    ReplyDelete

Berkomentarlah dengan sopan maka saya akan membalasnya dengan cepat :)
Janganlah berkomentar dengan link hidup, kata kotor, spam, sara, dsb.
Terima kasih :)

 
- ©2013 - 2016 Yogi Irhandi Simamora V.3 -