Thursday, July 4, 2013

Cara Membuat Text Area Di Blog



Cara Membuat Text Area di Blog - Text Area merupakan kolom yang bisa kamu tambahkan di dalam postingan blogmu.

Text Area ini bisa disisipi dengan quote, kode HTML, dan lain lain.

Saya merekomendasikan untuk menggunakan Text Area untuk kamu yang sering memposting suatu artikel yang berkaitan dengan tutorial seputar blogging,

karena biasanya beberapa tutorial blogging perlu menggunakan kode HTML dalam penerapannya.

Nah, Text Area ini dapat kamu gunakan untuk menaruh kode HTML tersebut, agar postingan terlihat rapih.

Dan kita bisa membuat Text Area dengan fitur tambahan "highligh", yaitu Text Area dengan tombol tambahan yang berfungsi untuk mem-blok semua teks yang ada di Text Area tersebut sehingga memudahkan pengunjung blog mu untuk meng-copy kode HTML tersebut.

Oke langsung saja kita ke tahapannya.

CARA MEMBUAT TEXT AREA BIASA TANPA HIGHLIGH

Yaitu dengan menggunakan kode HTML berikut:

<p align="center"><textarea name="mytextarea" rows="2" cols="10" readonly=""> ISI DENGAN 
TEKS YANG DIINGINKAN </textarea></p> 

kode yang berwarna biru bersifat custom, kamu bisa menggantinya sesuai selera.

Misalkan
<p align="center"><textarea name="mytextarea" rows="2" cols="10" readonly=""> MUNCUL </textarea></p>  

Hasilnya seperti ini:
 

Kok kecil? Tenang, Text Area tersebut dapat kamu custom ukurannya. Kamu dapat mengubah ukurannya dengan dua cara.

Cara pertama yaitu dengan cara manual, cara ini sangat simple, klik dan tekan pada bagian ujung bawah kanan Text Areanya, dan geser kekanan untuk memperbesar dan kekiri untuk memperkecil.

Cara kedua yaitu dengan mengedit kode HTMLnya, kamu dapat merubah angka pada rows dan cols yang terdapat pada kode tersebut., ganti sesuai selera.

CARA MEMBUAT TEXT AREA DENGAN FITUR TOMBOL HIGHLIGH

Gunakan kode HTML berikut:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Teks yang akan muncul di tombol Highlighnya"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="">Teks yang akan muncul di Text Areanya</textarea></p></div></form>

Misalkan:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="KLIK"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="">MUNCUL</textarea></p></div></form>
 
Maka hasilnya akan seperti ini
Sekian, Semoga trik Cara Membuat Text Area Di Blog  Bermanfaat!

1 comments:

  1. mantap gan sangat membantu buat newbie seperti ane
    mampir gan ke tempat ane http://updateaplikasiapk.blogspot.co.id/

    ReplyDelete