Kumpulan berbagai tips dan tutorial yang jos dan bermanfaat

Kamis, 25 April 2019

Apa Itu Text Area Pada Blog?

ext area merupakan hal yang cukup penting bagi kita dalam menonjolkan teks ataupun arahan da Apa itu Text Area Pada Blog?
Text area merupakan hal yang cukup penting bagi kita dalam menonjolkan teks ataupun arahan dan script yang sudah di-encode yang ada di dalam postingan maupun yang terdapat pada widget blog kita. Text area itu sendiri biasanya berbentuk kotak atau bingkai sehingga membedakan isi pada text area tersebut dengan goresan pena lainnya. Intinya, text area itu pada umumnya dipakai untuk mempermudah para pembaca blog kita dalam memblok teks maupun script yang kita tonjolkan tersebut. Text area sendiri hampir sama dengan blockquote, namun untuk postingan kali ini aku ingin lebih memperjelas lagi mengenai apa itu text area beserta ragam bentuknya. 

Khusus untuk arahan ataupun script yang ingin teman tampilkan ke dalam text area, teman perlu meng-encode terlebih dahulu arahan atau script html tersebut biar tampilannya dalam text area tersebut cuma dan hanya berbentuk goresan pena saja. Silahkan teman lihat teladan dari penggunaan text area di bawah ini yang mungkin sudah sering teman lihat pada blog maupun situs yang lain dikala browsing internet.

Variasi Text Area Pada Blog

Cukup banyak model dari text area ini yang sering dipakai pada blog. jadi silahkan pilih sendiri text area yang cocok bagi teman sekalian.

1. Text Area Dengan Tampilan biasa

<textarea>deskripsi teks anda disini</textarea>

Tampilannya akan menyerupai ini :

2. Text Area Dengan Tampilan Border & Background

<div style="border: 3px dashed rgb(245, 0, 61); padding: 5px; background: rgb(255, 255, 204) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Tulisan deskripsi yang ingin teman tampilkan disini</div></blockquote>

Tampilannya akan menyerupai ini :

Tulisan deskripsi yang ingin teman tampilkan disini

3. Text Area Dengan Tombol Highlight

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Tambahkan teks yang diinginkan disini. Jika teks terlalu panjang, maka akan memunculkan scroll secara otomatis dalam text area sehingga membantu pembaca blog dalam mengcopy goresan pena ataupun script yang diperlukan</textarea></p></div></form>

Tampilannya akan menyerupai ini :


Keterangan :
  • center mengatakan letak dari tombol highlight all, ganti dengan "left" kalau letaknya di kiri teks atau "right" bila letaknya di kanan teks. 
  • Highlight All silahkan ganti dengan yang teman inginkan pada goresan pena tombolnya.
  • WIDTH: 200px menunjukkan ukuran lebar dari text area, silahkan ubah sesuai impian sobat. 
  • HEIGHT: 100px menunjukkan ukuran tinggi dari text area, ubah sesuai keperluan.
  • 100 menunjukkan jumlah baris didalam text area, ubah kalau diharapkan atau biarkan secara default. 
  • 55 menunjukkan jumlah aksara yang ditampilkan per barisnya, ubah sesuai impian teman atau biarkan secara default.


4. Teks Area Dengan Tulisan Terblok Saat Diklik

<div align="center">
<textarea rows="4" cols="35" onclick="this.focus(); this.select();">Tambahkan teks yang diinginkan disini. Jika teks terlalu panjang, maka akan memunculkan scroll secara otomatis dalam text area sehingga membantu pembaca blog dalam mengcopy goresan pena ataupun script yang diperlukan</textarea></div>

Tampilannya akan menyerupai ini :


5. Teks Area Terblok Secara Otomatis Saat Disorot Mouse

<div><form name="BlockbyMouse"><div align="center" style="margin-bottom: 0pt; margin-top: 0pt;"><textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" rows="100" style="height: 50px; width: 300px;">Silahkan sorot teks dengan mouse teman disini</textarea</div></form></div>

Tampilannya akan menyerupai ini :


Last Words

Demikianlah postingan kali ini mengenai Apa itu Text Area Pada Blog? Terakhir kalinya, bagi teman yang tidak ingin biar goresan pena yang ada di dalam text area tersebut sanggup dihapus atau dalam arti lain goresan pena tersebut bersifat read-only. Silahkan teman tambahkan readonly="" sebelum goresan pena pada text area. Contohnya menyerupai ini.

<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();" readonly="">Tambahkan teks yang diinginkan disini. Jika teks terlalu panjang, maka akan memunculkan scroll secara otomatis dalam text area. Coba klik dan hapus goresan pena ini!!</textarea></div>

Tampilannya akan menyerupai ini :



Apa Itu Text Area Pada Blog? Rating: 4.5 Diposkan Oleh: abp29