Blogger Widgets
Pasang iklan disini

Senin, 24 Agustus 2015

Cara membuat Text Area Pada Posting Blog


Bloging >> Kenkyona.blogspot.com Hi guys, pada kesempatan kali ini saya mau share tentang cara nambahin text area di posting blog nih. Kalian udah pada tau kan text area ? pastinya udah dong bagi kalian yang lagi hobby blogging. Yups text area ini adalah suatu tempat yang atau area yang biasa di pake buat nyimpen tulisan tertentu atau text HTML. Kalau di MS. Word ni, sama kayak text box cuman yang ini buat di blog. berikut ini saya akan sedikit share tentang cara atau tutorial buat text area mulai dari yang sederhana sampai yang keren. yaudah langsung adja nih disimak. check this out disini !

1. Text Area Simple.

Yang pertama saya buka dulu nih dari text area yang paling sederhana. caranya pas nulis posting pilih mode HTML. dan masukan kode ini :

<textarea>isi text kamu disini<textarea/>

Hasilnya jadi kayak gini :
  

Bisa juga pake kode yang ini :
<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> 
 Beginilah Hasilnya :




2. Text area yang terblok hanya dengan sekali klik.


Caranya sama seperti diatas hanya saja gunakan kode berikut ini :
<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">Coba klik teks ini !!</textarea></div>
Hasilnya seperti ini :



3. Text area dengan tombol Highlight.

Kode scriptnya :

<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">Masukkan text yang diinginkan di sini. Jika terlalu panjang akan muncul scroll untuk membantu anda membaca keseluruhan teks</textarea></p></div></form>
Hasilnya :


4. Text area yang terblok semua ketika di sorot mouse.

Kode scriptnya :

<div>
<form name="RikiJunizar">
<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;">coba arahkan mouse ke teks ini !!</textarea></div>
</form>
</div>

Hasilnya :


5. Text area dengan border.

Kode Scriptnya :

<div align="center"><textarea cols="35" rows="2" style="border: 2px dotted red ;">Tulis apa aja deh.. terserah !!</textarea></div>

 Hasilnya :



Keterangan : 

  • Jika kode <div align="center">, Bararti tempat text areanya adalah rata tengah, anda bisa mengganti dengan left jika ingin rata kiri atau right jika ingin rata kanan.
  • Kode cols="35" berarti jumlah karakter yang akan ditampilkan perbaris adalah 35.
  • Kode rows="2" berarti jumlah baris yang akan ditampilkan pada text area adalah 2 baris. Jika jumlah baris lebih panjang dari yang disediakan maka text area secara otomatis akan menampilkan scrolling.
  • Height=100px merupakan tinggi text area yakni 100 pixel.
  • Width=200px merupakan lebar text area yakni 200 pixel.
  • Kamu bisa menambahkan kode readonly="" jika ingin text area yang anda buat tidak bisa di hapus.
Contoh kode script yang tidak bisa di hapus :


<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();"readonly="">Coba klik text area ini kemudian hapus, hasilnya nihil. Coba hapus text arae di atas pasti terhapus.</textarea></div>


.................................Selamat Mencoba....................................................

Anda sedang berada pada artikel tentang Cara membuat Text Area Pada Posting Blog dengan url https://kenkyona.blogspot.com/2015/08/cara-membuat-text-area-pada-posting-blog.html,Boleh copy paste tapi sertakan Cara membuat Text Area Pada Posting Blog sebagai sumbernya.

Posting Komentar

New

Popular

CopyRight © 2015 - kenkyona.blogspot.com By >> Amix Amrulloh