Textarea dengan tampilan menarik

Bookmark and Share

 Posting menggunakan textarea berbeda dengan apabila posting menggunakan cara yang lain. Penggunaan textarea ini memungkinkan setiap materi posting tampilkan murni sebagai teks, sehingga pada saat melakukan posting dalam bentuk KODE HTML, kode-kode akan dibaca utuh sebagai sebuah teks. Kelebihan seperti inilah yang membuat posting tutorial yang berkaitan dengan KODE HTML banyak menggunakannya. Disamping mudah dan praktis dalam penggunaan KODE, textarea relatif membuat posting menjadi lebih mudah dan effisien.ini adalah contoh tampilan untuk postingan dengan textarea dengan model menarik. bagaimana cara membuatnya tidaklah susah karena hanya membutuhkan script CSS-3 yang bisa anda gunakan untuk meringkas postingan yang terlalu panjang untuk mengetahui bagaimana cara membuatnya silahkan anda ikuti petunjuk bagaimana cara membuatnya


Sebelum memulai anda bisa dilhat Demonya disini


Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :

/* Textarea CSS#
----------------------------------------------- */
textarea.css3area {
background:-moz-linear-gradient(left, #051547, #253dee, #051547, #253dee, #051547);
border: 0px solid transparent;outline: none;
border: 5px solid;
border-color: #051547 #999 #999 #051547;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;
-moz-box-shadow:
-1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;-webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
padding: 5px 5px 2px;
margin: 20px 10px;-o-transition: all 1s ease-out;
height:200px;
width: auto;
margin-right: 5px;
color: #fff;
}
textarea.css3area:hover {
background:-moz-linear-gradient(left, #253dee, #051547, #253dee, #051547, #253dee);
border-color: #999 #888 #888 #999;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
text-shadow: 1px 1px 1px #aaa;
color: #fff;
box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
-moz-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
-webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
height:200px;
width: auto;
}

Untuk cara pasangnya pada postingan :
<textareaclass="css3area"cols="40"row="30">silahkan..letakan teks anda di sini...!!!</textarea>

Catatan
- Rubah lebar (cols) dan tinggi (rows) sesuai kebutuhan posting

Komentar :

ada 2 komentar ke “Textarea dengan tampilan menarik”
server pulsa elektrik mengatakan...
pada hari 

duh,mantaf banget sob,tapi kalo di page di blog,pengaruh ga kepada kecepatan akses blog

Yoez MrNox mengatakan...
pada hari 

gak tu gan, dicoba aja...

Posting Komentar

Terima kasih atas komentar anda !

Check Page Rank of your Web site pages instantly:

This page rank checking tool is powered by Page Rank Checker service

By Manyunte Ronyox
manyunte ronyox
 
hostgator coupons