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 :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- 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;
}
----------------------------------------------- */
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
duh,mantaf banget sob,tapi kalo di page di blog,pengaruh ga kepada kecepatan akses blog
gak tu gan, dicoba aja...