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

• CSS3 TransisiSetelah yang lalu kita belajar tentang Transformasi 2D, kemudian agar lebih menarik kita tambahkan dengan efek transisi. Dengan CSS3 transisi, kita dapat menambahka ... readmore
• Cara membuat gambar memutarFitur CSS memungkinkan kita untuk membuat banyak hal khususnya membuat tampilan halaman web ataupun blog menjadi lebih menarik. Pada waktu yang lalu saya sudah bany ... readmore
• Cara membuat efek membesar pada gambarMemberikan efek membesar pada gambar adalah salah satu cara menjadikan web atau blog tampil menarik. Biasanya digunakan pada web atau blog yang banyak menampilkan g ... readmore
• Cara membuat menu tooltipMenu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link at ... readmore
• Modifikasi Thread Comments blogger dengan CSS Bismillah, menlanjutkan postingan yang sbelumnya yang membahas tentang caa Mengganti Avatar Anonim Pada Komentar dengan jQuery, kali ini saya akan membahas tent ... readmore