Membuat Text Area Keren pada Blog

Text area merupakan sebuah kolom yang dengan kontainer tulisan atau kode html dengan tombol highlight atau select all sehingga memudahkan visitor meng-copy kode html atau tulisan pada blog. Oh ya pada kesempatan sebelumnya saya juga sudah menjelaskan tentang bagaimana membuat tombol buka tutup atau tombol spoiler di dalam postingan blog. Jika sobat berminat, silahkan baca DISINI.

Nah pada kesempatan kali ini, lostsector akan menjelaskan 2 (dua) macam text area yakni text area dengan tombol select all atau highlight all dan text area auto select. Untuk penjelasannya, perhatikan langkah-langkahnya di bawah ini :

1. Text area dengan tombol select all

Contoh  Text area dengan tombol select all »

Ganti Tulisannya Sesuai Keinginan

Berikut Kode yang dibuthkan untuk membuat text area seperti di atas :

<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">
<textarea cols="30" name="txt" rows="5" wrap="virtual">ganti tulisan ini dengan tulisan atau kode html yang sobat inginkan</textarea></div>
</form>
</div>

2. Text area auto select
Contoh text area auto select.

Contoh text area auto select jika cursor di sorot ke Sini

Kodenya :

<div style="text-align: center;">
<textarea cols="30" onmouseover="this.focus(); this.select();" rows="2">Contoh text area auto select jika cursor di sorot ke dalamnya</textarea></div>

Keterangan :

• Warna Merah : Merupakan pengaturan text align (center : rata tengah, justify : rata kiri kanan, left : rata kiri, right : rata kanan)
• Warna Biru : Merupakan tombol untuk memblok semua text area
• Warna Orange : Merupakan lebar dan tinggi form text area
• Warna Hijau : Merupakan isi dari text area, silahkan ganti seusuai dengan keinginan sobat.

>