Cara membuat textarea dengan tombol "select all"

Belajar kali ini adalah bagaimana kita menggunakan Javascript dan Css untuk menambahkan tombol "select all" pada textarea. Sehingga pengunjung lebih mudah untuk mengcopy teks atau kode yang diberikan dalam textarea, dan pengunjung hanya tinggal mengklik tombol "select all" tersbut. Textarea ini bisa kita gunakan dalam posting seperti artikel ini ataupun kita bisa taruh pada sidebar, tergantung kebutuhan.

Lebih jelasnya lihat contoh bentuk textarea dibawah ini :

"Disini adalah teks atau kode yang diberikan kepada pengunjung untuk di copy"

Ok... Bila anda berminat membuat textarea seperti ini, silahkan anda ikuti langkag - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.




3. KLik tab Edit HTML.

4. Cari kode </head>
5. Copy dan paste kode dibawah ini tepat sebelum kode </head>

<script type="text/javascript">

function selectAll(){
document.formtombol.textarea.focus();
document.formtombol.textarea.select();
}</script>

<style type="text/css">
div.textareatombol{
width:430px;
border:4px solid;
border-color:#D8D8D8;
background-color:#A4A4A4;
padding:10px;
}</style>

6. Simpan Template
7. Langkah selanjutnya Klik elemen laman lalu tambah Gadget dan pilih HTML/JavaScript
8. Copy dan paste kode dibawah ini pada gadget tersebut :

<center><div class="textareatombol">

<form name="formtombol" >
<textarea cols="50" rows="3" name="textarea">"Disini adalah teks atau kode yang diberikan kepada pengunjung untuk di copy"</textarea>
</form>
<input type="button" name="selectit" value="Select All" onclick="selectAll ();">

</div></center>

9.  Lalu Simpan dan jadi deh......

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Judul: Cara membuat textarea dengan tombol "select all"; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts