Text Area dengan Tombol Highlight

Kita sudah pernah membahas tentang pengertian, fungsi dan cara membuat text area disini.

Dengan penggunaan Text Area seperti itu, mempunyai kelemahan, yaitu pengunjung yang ingin mendapatkan kode didalam text area harus men-dark atau memblok secara manual.

Tidak masalah sebenarnya, tetapi akan sedikit menyulitkan jika text area kita sempit/kecil.

Nah, sekarang Ayas mau kasi trik bagaimana membuat text area dengan tombol highlight di atas nya, sehingga jika orang ingin memblok kode, tinggal klik tombol tersebut, sudah terblok kode2 tersebut, sehingga tinggal copy aja.

Gimana cara membuat text area dengan tombol highlight, yuk kita coba bareng.


Pertama, tentu Sodara dah punya kode untuk gambar Sodara. Contoh gambar ini :



Mempunyai kode :

<img src="http://i39.tinypic.com/2a8qioz.jpg" />

Untuk membuat text area dengan tombol Highlight, gunakan kode seperti ini :

<center><a href="http://blog-howtotricks.blogspot.com/" target="_blank"><img src="http://i39.tinypic.com/2a8qioz.jpg" /></a>
<div><form name="copy"><div align="center"><input value="Highlight" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button">
<textarea rows="1" cols="22" name="txt" ><a href="http://blog-howtotricks.blogspot.com/" target="_blank"><img src="http://i39.tinypic.com/2a8qioz.jpg" /></a></textarea></div></form></div></center>

Maka akan menghasilkan :

<a href="http://blog-howtotricks.blogspot.com/" target="_blank"><img src="http://i39.tinypic.com/2a8qioz.jpg" /></a>

Silahkan ganti text berwarna merah dengan url blog Sodara, dan yang berwarna biru dengan url gambar Sodara.

Selamat mencoba..