Sabtu, 11 Februari 2012

0 Membuat Textarea 3D Cantik di Blogger/Blogspot: (Light-Yellow)


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!
 

Textarea adalah bagian dari form yang berfungsi sebagai space/ruang bagi teks/konten khusus yang ingin diberi posisi/penempatan tertentu. Ada banyak jenis textarea berdasarkan fungsi form, yaitu untuk mengisi data, submission/pendaftaran, polling, search, dan lain-lain. Namun pada posting kali ini akan dikhususkan pada texarea yang berfungsi sebagai space bagi konten tertentu untuk digunakan olh pengunjung dan bersifat read-only, baik pada posting blog/website maupun pada widget/sidebar.


Pada posting terdahulu, saya pernah berbagi tentang textarea sederhana dengan menggunakan tag div dan beberapa aturan CSS yang sederhana pula. Di posting ini, saya share textarea dengan tag originalnya (textarea tag) dan beberapa sentuhan style CSS3. Posting ini akan dilanjutkan dengan posting-posting selanjutnya tentang textarea dengan berbagai macam styling yang nantinya dapat dipilih dan disesuaikan dengan warna dan template blog sehingga akan tampak lebih indah.


Dasar tag textarea adalah:
<textarea>teks/konten disini</textarea>
Nah, dengan memasukkan beberapa atribut dan style CSS, kita dapat mempercantik tampilan textarea tersebut. Contoh
<textarea style="width: 300px;height:60px; border:1px solid red;" readonly="readonly">teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini</textarea>
Hasilnya: 






Itu adalah sebagian contoh sederhana styling pada text area. Selanjutnya berikut adalah textarea dengan menggunakan styling CSS3 yang sedikit agak rumit. Anda dapat meenggunakan script/kodenya di blog anda dan melakukan beberapa kostumisasi sesuai kebutuhan.





Cara membuatnya:
1. Copy kode CSS berikut:
<style type="text/css">


.titaniccyber-textarea1 {padding:3px;margin:0;width:400px;height:60px;color:#FFCC00;font:12px arial;background:#000;border:2px outset #FFCC00;-moz-box-shadow: 7px 7px 3px #888;-webkit-box-shadow: 7px 7px 3px #888; box-shadow: 7px 7px 3px #888;}

.titaniccyber-textarea1:hover {color:#FFFF00;border:3px double #FFB200;-moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0;"}

</style>
Kostumisasi: atur nilai width (lebar) dan height (tinggi) sesuai dengan keinginan.
2. Jika ingin menggunakan textarea yang sama pada semua posting/widget, paste kode CSS tersebut tepat di atas </head> pada edit HTML template kemudian save.
3. Jika ingin memakainya pada satu posting saja, masukkan kode CSS di bagian bawah posting melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) atau HTML/Javascript pada widget.
4. Kopi kode HTML berikut:
<textarea class="titaniccyber-textarea1" readonly="readonly">teks/konten textarea disini</textarea>
5. Ganti teks/konten textarea disini dengan konten anda. 
6. Masukkan ke editor posting melalui melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) HTML/Javascript pada widget dimana anda sebelumnya telah memasukkan kode CSS.
7. Done. Anda dapat mempreviewnya langsung melalui "compose".

0 komentar:

1. Good Girl
2. D'MASIF -sudah perih ini
3. Haney Bunny Sweety-G-String.mp3
4. ARMADA-Mau Dibawa Kemana.mp3
5. Ayang Ayangku.mp3
6. Tak Semestinya Kita Berpisah (TSKB).mp3
7. When The Children Cry - White Lion.mp3
Info

Catatan HUGGENG|CYBER

SELAMAT DATANG DI BLOG SAYA :), MAAF KALO DI BLOG INI ISI DARI KONTEN KURANG MENARIK< TETAPI SAYA AKAN MEMBUAT PARA PENGUNJUNG SENANG DI BLOG INI

Sekilas Tentang Admin

Saya Buakanlah Profesional Pembuat Blog Atau Web, Saya Masih Butuh Belajar, Dari Rekan2 Bloger. INFO:
BLOG ANAK INDONESIA UNTUK ANDA SEMUA

Follow

Follow HUGGENG|CYBER

Nikmati Layanan TV Online Gratis di HUGGENG|CYBER *