Cara Membuat Text Area V.2

Assalamu'alaikum, hai kawan, kawan saya mau bagikan sebuah trik cara membuat text area V.2, bedanya dengan tutorial text area sebelumnya, disini, ada banyak variasi text area, dan yang lebih menariknya lagi saya akan ajarkan sekalian cara membuatnya, dari kode text area sederhana, sehingga kamu bisa edit sendiri text area yang kamu suka, asikkan, yap tidak perlu panjang lebar, sekarang kita coba bersama experimen cara buat text area V.2 ini.


Dibawah ini kode text area sederhana.


Text Area Tanpa Tombol

<div style="text-align: center;"><textarea style="width: 300px; height: 50px; padding:3px">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div>

Tulis text ataupun kode yang mau anda tampilkan disini

Text Area Tombol diatas

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 400px; height: 50px;" name="txt">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></p></form>

Tulis text ataupun kode yang mau anda tampilkan disini

Text Area Tombol dibawah

<form name="copy"><div style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div><p align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></p></form>

Tulis text ataupun kode yang mau anda tampilkan disini

Sekarang waktunya kita berexperimen, dan saya tidak akan satu persatu dari tiga jenis seperti diatas, yang saya experimenkan hanya text area yang tanpa tombol, karena sama saja.

Kode yang akan kita pakai :

";background: #EF0090; color:  #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding:  5px;" (tanpa tanda kutip)

=============================================>>

Kode text area tanpa tombol >>

<div style="text-align: center;"><textarea style="width: 400px; height: 50px; padding:3px(disini kamu sisipkan)">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div>

Sekarang kamu sisipi kode diatas kedalam kode text area tanpa tombol, lihat dibawah :

<div style="text-align: center;"><textarea style="width: 300px; height: 50px; padding:3px;background: #EF0090; color:  #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding:  5px;">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div>

Hasil :

Dotted 

Tulis text ataupun kode yang mau anda tampilkan disini

Bagaimana untuk jenis text area dengan tombol ?, caranya sama saja, kamu sisipkan sesuai yang saya terangkan diatas, nah sekarang saya berikan model-model text area yang lain.

Double

Kode :

<div style="text-align: center;"><textarea style="width: 300px; height: 50px; padding:3px;background: #2E2EFE; color:  #FFEFF9; border: 3px double#FFEFF9; line-height: 1.5em; padding:  5px;">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div>

Hasil :

Tulis text ataupun kode yang mau anda tampilkan disini

Ridge 

Kode :

<div style="text-align: center;"><textarea style="width: 400px; height: 50px; padding:3px;background: #D7DF01; color:  #000000; border: 3px ridge #FFEFF9; line-height: 1.5em; padding:  5px;">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div>

Hasil :

Tulis text ataupun kode yang mau anda tampilkan disini

Dashed

Kode :

<div style="text-align: center;"><textarea style="width: 400px; height: 50px; padding:3px;background: #DF3A01; color:  #ffffff; border: 3px dashed#000000; line-height: 1.5em; padding:  5px;">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div>

Hasil :

Tulis text ataupun kode yang mau anda tampilkan disini

Ini diantara model text area, kamu bisa ganti warna background, border, tulisan, lebar, dan tinggi yang sesuai dengan template kamu, dan untuk mengetahui bagaimana mengganti kode warna dan jenis border, kamu perhatikan kode text area serta keterangannya dibawah.

<div style="text-align: center;"><textarea style="width: 400px; height: 50px; padding:3px
;background: #EF0090; color:  #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding:  5px;">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div>

Catatan :

• Kamu ganti kode warna jingga, untuk mengganti warna background text area.
• Kamu ganti kode warna kuning, untuk mengganti warna tulisan text area.
• Kamu ganti kode warna hitam, untuk mengganti jenis border text area.
• Kamu ganti kode warna biru, untuk mengganti warna border text area.
• Kamu ganti kode warna hijau, untuk melebarkan ukuran text area.
• Kamu ganti kode warna merah jambu, untuk meninggikan ukuran text area.

Yap, sampai disini dulu tutorial cara membuat text area V.2 ini, semoga bermanfaat, bila ada yang dimengerti, bisa berkomentar dibawah.

Link : Cara Membuat Title Blog Berjalan