Cara Membuat Textbox Area

Hidup ini untuk berbagi. Textbox Area ini sangat berguna untuk menuliskan text / kode di dalam postingan agar mudah di copy - paste juga untuk menghemat halaman postingan agar tidak terlalu panjang ke bawah. Selain itu textbox area ini juga dilengkapi dengan tombol Hightlight All / Select All yang berfungsi untuk menyeleksi semua kode / text secara otomatis hanya dengan satu sentuhan.

Live Demo

Untuk membuat textbox area seperti gambar di atas ini dia kodenya

Silahkan Copy - Paste kode dibawah. Supaya lebih mudah: klik tombol Select All lalu tekan CTRL + C atau boleh juga klik kanan lalu pilih copy

<style type="text/css"> .codebox{ border: 2px solid #ffcc00; -moz-border-radius-topleft:12px; -moz-border-radius-topright:12px; -moz-border-radius-bottomleft:12px; -moz-border-radius-bottomright:12px; background:#ffffcc; padding:5px } .codebox2 { background:#ffffcc; padding:10px } </style> <div class="codebox"> <div class="codebox2"> Silahkan <b>Copy - Paste</b> kode dibawah. Supaya lebih mudah: klik tombol <b>Select All</b> lalu tekan <b>CTRL + C </b> <i>atau</i> boleh juga klik kanan lalu pilih copy </div> <form style="font-family: monospace; font-size: 8pt;" name="copy"><center><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></center> <!-- Masukan Kode di dalam text Area--> <textarea dir="ltr" cols="100" name="txt" rows="15" style="width: 100%;"> Masukan kode / text kamu disini </textarea><br/> <script src='http://sites.google.com/site/hitsukeproject/TextboxArea.js' type='text/javascript'></script></form> </div>

Keterangan

Untuk memasukan text / kode didalamnya cari tulisan Masukan kode / text kamu disini GANTI itu dengan text / kode yang kamu inginkan, tapi kalau kamu mau memasukan / menuliskan kode HTML didalamnya, ada beberapa hal yang harus kamu perhatikan

1. Untuk menuliskan tanda lebih kecil dari (< ) gantikan dengan &lt;
2. Kalau untuk tanda lebih besar dari (>) gantikan dengan &gt;
3. Gantikan tanda kutip (") dengan &quot;
4. Tips agar lebih mudah menggantinya, gunakan Notepad++ atau Microsoft Office untuk me-Replace otomatis kode secara keseluran dengan menggukan fungsi Replace All.
5. Hampir aja lupa yang ini: Pada halaman postingan kamu ganti Edit HTML Settingsnya jadi Ignore newlines

Untuk mengatur ukuran textbox areanya perhatikan kode

<textarea dir="ltr" cols="100" name="txt" rows="15" style="width: 100%;">

Cols="100" untuk mengatur jumlah kolom didalam textarea
rows="15" untuk mengatur jumlah barisnya
sytle="width:100%"; untuk mengatur lebarnya (saya sarankan kalau yang ini tidak perlu diganti)

Untuk mengganti warna / stylenya belajar sendiri aja yah..? hehe...otak-atik aja ndiri ntar juga bisa kox ^_^.
Sekian dulu. Smoga berhasil.