September 2012 | INDIANA NET

Text Area Dengan Tombol Select All Versi 2



Sebelumnya saya telah posting tentang bagaimana caranya membuat Text Area baik yang dengan tombol select all ataupun yang tanpa tombol select all. nah sekarang saya akan membahas cara membuat Text Area Versi 2, dimana pada Text Area versi ini akan terlihat lebih menarik lagi, karena pada Text Areanya akan bisa kita tambahkan background dan juga border yang cukup tebal seperti pada contoh dibawah ini.




Untuk membuat text area seperti diatas, anda cukup mengcopy code dibawah ini dan masukan pada bagian 
postingan anda, atau bisa juga anda masukan pada widget HTML anda.

<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div>
<div style="text-align: center;">
<textarea name="txt" style="-moz-border-radius: 12px; -moz-box-shadow: -1px -1px 1px #ff0000, 1px 1px 1px #ff0000, 1px 1px 5px #ff0000; -webkit-border-radius: 12px; -webkit-box-shadow: -1px -1px 1px #000000, 1px 1px 1px #000000, 1px 1px 5px #000000; background: #000000; border-radius: 12px; border: 10px solid #c30000; box-shadow: -1px -1px 1px #00ff00, 1px 1px 1px #00ff00, 1px 1px 5px #00ff00; color: white; height: 550px; padding: 5px; width: 490px;">
Masukan apapun yang anda ingin tampilkan pada Text Area ini, baik itu berupa 
Text,Link ataupun Source gambar pada Text Area ini

</textarea></div>
</form>

Keterangan :
- Teks yang berwarna biru merupakan teks yang nantinya muncul pada kotak tersebut. Silahkan anda ganti dengan teks atau kode yang ingin anda tampilkankan dalam kotak tersebut.
- center yaitu menunjukkan posisi text dalam kotak tersebut di posisi tengah. Bila anda ingin meletakkan text tersebut dikanan. Anda cukup menggantinya dengan right dan Left bila anda ingin meletakkannya diposisi sebelah kiri.
- Width yaitu untuk ukuran lebar kotak dan Height untuk ukuran tinggi kotak. Silahkan anda ganti sesuai keinginan keinginan anda.

Ok mungkin cukup sampai disini dulu postingan saya mengenai cara membuat kotak teks area dengan tombol select all Versi 2 ini. semoga bermanfaat bagi anda.


Read More Add your Comment 0 komentar

Membuat Teks Area dengan Tombol Select All



Mungkin anda pernah berkunjung ke suatu blog ataupun website dimana pada halaman blog ataupun dalam postingan mereka terdapat sebuah text area dengan tombol select all. Contohnya seperti pada gambar dibawah ini.


Sekarang pertanyaannya adalah bagaimana kita bisa membuat kotak Teks area seperti itu, untuk membuat Teks Area dengan Tombol Select All tersebut caranya adalah seperti keterangan berikut ini.

Text area adalah sebuah perintah HTML yang berfungsi untuk membuat sebuah kotak ataupun bidang dimana dalam kotak tersebut bisa kita masukan beberapa text yang kita inginkan, seperti pada contoh diatas.

Kotak ini biasa kita gunakan untuk mengisi beberapa kata, kode-kode pada postingan maupun untuk membuat kotak link exchange. bagi anda yang ingin membuat sebuah kotak seperti tersebut caranya sangatlah mudah. Anda cukup copy kode dibawah ini lalu letakkan ke blog ataupun postingan anda.

<div style="text-align: center;"><textarea style="width: 300px; height: 40px; padding:5px">Tulis text ataupun kode yang ingin anda tampilkan pada Text Area ini</textarea></div>

Keterangan :
- Teks yang berwarna biru merupakan teks yang nantinya muncul pada kotak tersebut. Silahkan anda ganti dengan teks atau kode yang ingin anda tampilkankan dalam kotak tersebut.
- center yaitu menunjukkan posisi text dalam kotak tersebut di posisi tengah. Bila anda ingin meletakkan text tersebut dikanan. Anda cukup menggantinya dengan right dan Left bila anda ingin meletakkannya diposisi sebelah kiri.
- Width yaitu untuk ukuran lebar kotak dan Height untuk ukuran tinggi kotak. Silahkan anda ganti sesuai keinginan keinginan anda.

Membuat kotak teks/text area dengan tombol Select All 
Tadi yang kita bahas adalah tentang cara membuat text area. Nah sekarang kita akan membahas tentang kelanjutannya yaitu text area dengan tombol select all. Tombol select all adalah sebuah tombol yang digunakan untuk menghighlight seluruh teks yang berada didalam text area tersebut, sehingga kita atau pengunjung bisa lebih mudah untuk mengcopy seluruh teks atau kode yang berada dalam text area tersebut. Contohnya seperti dibawah ini, coba anda tekan tombol select all yang ada dibawah ini.maka semua teks yang ada dalam kotak tersebut akan terhighlight atau terblok semua dengan mudah.

Untuk membuat teks area dengan tombol select all seperti diatas caranyan adalah seperti berikut, copy semua kode dibawah ini ke blog ataupun postingan anda.

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: Center;"><textarea style="padding: 3px; Width: 300px; Height: 50px;" name="txt">Tulis text ataupun kode yang ingin anda tampilkan pada Text Area ini</textarea></p></form>

Dan hasilnya akan terlihat seperti pada contoh dibawah ini:

Catatan :
- Teks yang dicetak tebal dan berwarna kuning adalah teks yang muncul pada tombol. Silahkan anda bisa menggantinya dengan nama lain, misalnya pilih semua, copy semua ataupun yang lainnya.
- Teks berwarna biru adalah teks muncul didalam kotak. Silahkan anda ganti dengan teks ataupun kode yang ingin anda tampilkan dalm kotak tersebut.
-  Teks yang di cetak tebal dan berwarna hitam seperti Center, Width dan Height. silahkan anda ganti juga sesuai keinginan anda.

Ok mungkin cukup sampai disini dulu postingan saya mengenai cara membuat kotak teks area dengan tombol select all ini semoga bermanfaat.


Read More Add your Comment 1 komentar