Cara Membuat Textarea Dengan Tombol Highlight All

0komentar

Textarea adalah area atau tempat untuk meletakkan atau menyimpan teks atau tulisan-tulisan lainnya yang kita anggap penting.

Biasanya Textarea dipasang pada artikel berjenis tutorial dan dipakai untuk menyimpan kode HTML yang tidak bisa di tulis langsung ke dalam postingan di blog.

Jadi, dengan membuat Teksarea, kita akan mempermudah pengunjung Blog untuk mengcopy seluruh isi teks yang terdapat dalam Textarea tersebut.

Ada banyak artikel tutorial dan jenis-jenis Textarea yang diunggah oleh teman-teman blogger. Dan salah satunya sudah kami posting pada artikel sebelumnya : Cara Membuat Textarea Di Blog.

Hanya saja ada satu kelemahan dari Textarea tersebut yaitu tidak dilengkapi dengan fitur Scrollbar. Artinya jika Kode Skrip yang agan kopas panjaaaaaang sekaleee, maka Textarea box nya juga akan mulur kebawah yang tentunya mengurangi kenyamanan pengunjung karena harus terus nyekrol kebawah.

Oleh karenanya, kali ini kami akan tampilkan satu tipe Textarea yang disamping memiliki fitur Scrollbar otomatis sehingga menghemat tempat, juga dilengkapi tombol Highlight untuk memudahkan Copy Paste.

Urutan kerja :

1. Masuk ke Dasbor Blog agan dan klik menu "Entri Baru".

2. Buatlah sebuah artikel baru pada mode Compose / mode biasa.

3. Ketika tulisan agan tiba pada bagian dimana agan akan mengunggah Kode Skrip, rubahlah mode postingan agan menjadi mode HTML (ingat !, mode HTML).

4. Langkah berikutnya, Copy Kode Skrip dibawah :

<div>
<form name="copy">
<div align="center">
<textarea cols="20" name="txt" rows="5" style="height: 60px; width: 60%;padding: 10px;" wrap="VIRTUAL">Letakkan Kode Skrip, teks atau tulisan-tulisan lainnya yang agan anggap penting disini. Dengan demikian Kode Skrip atau tulisan tersebut akan tampil dan bisa di Copy and Paste oleh pengunjung blog agan</textarea>
</div>
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" />
</div>
</form>
</div>

5. Dan Paste / salin pada halaman postingan dalam mode HTML tersebut.

6. Selanjutnya hapus tulisan "Letakkan Kode Skrip bla bla bla..." diatas dan ganti dengan Kode Skrip atau teks yang agan inginkan.

7. Rubah kembali halaman postingan ke mode Compose.

8. Silahkan lanjutkan tulisan agan sampai selesai.

Dan ini penampakan Textarea dengan tombol Highlight yang dimaksud :

Letakkan Kode Skrip, teks atau tulisan-tulisan lainnya yang agan anggap penting disini. Dengan demikian Kode Skrip atau tulisan tersebut akan tampil dan bisa di Copy and Paste oleh pengunjung blog agan

Note : Jika diperlukan, rubah nilai height dan widht yang terdapat pada Kode Skrip diatas agar matching dengan lebar templat blog agan.

Happy Blogging !.

Source Code : http://www.maskolis.com/2011/03/tutorial-membuat-text-area.html