Membuat Text Area di Blog - Text area adalah suatu tempat atau area yang digunakan untuk menulis suatu teks atau kode HTML tertentu pada area tersendiri. Text area bisa ditempatkan di dalam suatu page(halaman) atau bisa juga diletakkan dalam suatu widget. Text area akan memudahkan pengunjung utuk copy paste text/HTML.
berikut ini adalah kode dasar/standar dari text area . .
hasilnya akan seperti ini:
Contoh diatas adalah text area yang dibuat dengan kode/script standar. Sebenernya ada beberapa jenis text area yang bisa dibuat, tapi saya menemukan cara dari sahabat blogger lainnya, sharing 4 jenis "text area" yang biasa digunain dalam proses blogging.
1. Text Area yang kolom dan barisnya bisa diatur
Kode:
<div align="center">
<textarea name="code" rows="2" cols=35">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea></div>
<textarea name="code" rows="2" cols=35">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea></div>
hasilnya:
2. Text Area dengan satu klik maka seluruh isi akan di blok
Kode:
<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>
Hasilnya:
3. Text Area dengan tambahan select all button
Kode:
<div align="center">
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div>
<div align="center">
<textarea style="width: 300px; height: 80px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea>
</div>
</div>
</form>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div>
<div align="center">
<textarea style="width: 300px; height: 80px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea>
</div>
</div>
</form>
Hasilnya:
4. Text Area yang jika disorot mouse akan di blok semua
Kode:
<div>
<form name="agungindraguna">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 50px; width: 300px;">coba arahkan mouse ke teks ini !!</textarea></div>
</form>
</div>
<form name="agungindraguna">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 50px; width: 300px;">coba arahkan mouse ke teks ini !!</textarea></div>
</form>
</div>
Hasilnya:
Keempat jenis text area di atas adalah yang umum dipergunakan dalam proses blogging. Sebenernya masih ada jenis lainnya, yaitu Text Area dengan border
Kode:
<div align="center"><textarea cols="35" rows="2" style="border: 2px dotted red ;">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea></div>
Hasilnya:
Text area border seperti ini jarang di gunakan oleh blog. tapi ini hanya sekedar info (berbagi ilmu).
sekian info dari saya tentang TEXT AREA, semoga bermanfaat buat sahabat-sahabat blogger.
Tutorial by http://tipstrikseoblogger.blogspot.com
{ 0 comments... read them below or add one }
Post a Comment