Saturday, September 24, 2011

Cara Membuat Text Area

Membuat text area di halaman posting atau di widget blogspot, cara membuat text box area, "select all" button pada text area atau text box area.

Text area yang terdapat tombol "Select All" adalah area atau tempat yang dibuat untuk menyimpan tulisan baik berupa text maupun berupa kode HTML/Javascript yang akan memudahkan pembaca dalam melakukan copy-paste hanya dengan sekali klik pada button Select All, seluruh text didalam text area langsung dapat ter-copy.

Perhatikan kedua contoh berikut:

1. Text Area Tanpa Select All Button:


2. Text Area Dengan Select All button:



Untuk dapat membuat text area seperti diatas, silakan copy kode HTML dibawah ini dan masukan kehalaman posting baru Anda:
1. Text Area Tanpa Select All Button:

<p align="center"><textarea name="code" rows="6" cols="20">tempatkan tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript</textarea></p>

Ganti tulisan"tempatkan tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript" dengan text atau HTML/javascript yang Anda miliki. Klik publish dan lihat hasilnya.

Keterangan :

rows="6",
menunjukan tinggi text area yang dapat Anda atur sesuai keinginan dengan mengganti nilai angkanya.

Cols="20", menunjukan lebar text area. Jika Anda ingin text area yang lebih lebar, silakan ganti angka " 20 " dengan angka yang lebih tinggi nilainya.

2. Text Area Dengan Select Button:

<div><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"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 90px" name="txt" rows="100" wrap="VIRTUAL" cols="55">tempatkan tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript
</textarea></p></div></form>


Ganti tulisan"tempatkan tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript" dengan text atau HTML/javascript yang Anda miliki.
Klik terbitkan atau publish, lihat hasilnya.

Pada text area yang kedua (with Select All button) terdapat dua bagian element html, pertama adalah element kode html pembuatan Select All button dan yang kedua adalah element kode html untuk membuat text area.

Berikut adalah beberapa element penting yang mungkin perlu Anda ketahui:
Element within text area with Select All button:

1. <div align="center">. Kata center artinya posisi button akan berada di tengah. Jadi, jika Anda ingin posisi button/tombol berada disebelah kiri, ganti saja dengan kata
left. Dan jika ingin berada disebelah kanan, ganti dengan kata
right.
2. <input

onclick="javascript:this.form.txt.focus
();this.form.txt.selec()">. Kode ini artinya ketika tombol Select All di klik, maka seluruh text yang ada didalamnya akan di select all (dipilih dan di block semua agar dapat di copy sekaligus), sebaiknya jangan merubah tulisan ini.
3. Value="Select All". Kata Select All adalah kata yang akan muncul didalam button/tombol. Tulisan select all dapat Anda ganti sesuai selera.

Element within manual text area:

1. <p align="center">. Menunjukan bahwa text area akan berada di tengah, jika Anda ingin text area berada disebelah kiri, ganti kata center dengan kata left untuk kiri atau right untuk dikanan.

2. <text style="WIDTH:
200px"> kata
"WIDTH:200px"
adalah lebar text area sebanyak 200 pixel. Jika Anda ingin merubah lebar text
area, Anda dapat menggantinya dengan angka yang anda inginkan, misalnya; 400px;

1 comments:

Unknown said...

thx sangat bermanfaat...

Post a Comment

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | cheap international voip calls