Cara Membuat Textarea Plus Select All Dengan Efek Hover

Sudahkah anda mengisi " RUANG SAHABAT "
blog ini ? Kalau belum, isilah terlebih dahulu ......
sebelum anda menggunakan tutorial ini.

Pada kesempatan yang lalu kita sudah membahas

" Cara Membuat Textarea Dengan Efek Hover ".

Untuk kesempatan kali ini kita akan membahas "

Cara Membuat Textarea Plus Select All Dengan

Efek Hover ", yang merupakan kelanjutan dari

tutorial sebelumnya. Contohnya seperti di bawah ini :

Letakkanlah cursor anda di atas textareanya.

Pada kesempatan yang lalu kita sudah membahas " Cara Membuat Textarea Dengan Efek Hover ". Untuk<br /> kesempatan kali ini kita akan membahas " Cara Membuat Textarea Plus Select All Dengan Efek Hover ",<br /> yang merupakan kelanjutan dari tutorial sebelumnya. Contohnya seperti ini

Bila anda ingin membuatnya, caranya adalah :

1.   Masuk -> Edit HTML.

2.   Cari kode </b:skin>
      Letakkan kode berikut di atasnya.
      Lalu simpan template anda.

Untuk kode textarea berbackground warna :

textarea.imageOne{<br /> background-color:#FF0000;<br /> }<br /> <br /> textarea.imageTwo{<br /> background-color:#00FF00;<br /> }

KETERANGAN :

Ubahlah warna background-color: 'imageOne' &
'imageTwo' nya dengan warna apa saja
yang anda inginkan.

Untuk kode textarea berbackground gambar :

textarea.imageOne{<br /> background-image:url(URL gambar 1 disini);<br /> }<br /> <br /> textarea.imageTwo{<br /> background-image:url(URL gambar 2 disini);<br /> }

KETERANGAN :

Masukkan 2 (dua) URL gambar anda pada kode
URL gambar 1 disini & URL gambar 2 disini.

Pada waktu anda menulis posting yang berkode HTML,
Script atau lainnya, Letakkan kode berikut ini
sebelum kode HTML atau Script anda :

<form name="copy">

<div align="center">

<input onclick="javascript:

this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div>

<div style="text-align: center;">

<textarea ;="" class="imageOne" cols="40" name="txt" onmouseout="this.className='imageOne '" onmouseover="this.className='imageTwo'" rows="10">

Dan di akhir kode HTML atau Script anda,
letakkanlah kode </textarea></div></form> sebagai
penutup kode HTML atau Script anda.

Jadi susunannya akan seperti ini :

<form name="copy">
<div align="center">
<input onclick="javascript:
this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div>

<div style="text-align: center;">
<textarea ;="" class="imageOne" cols="40" name="txt" onmouseout="this.className='imageOne '" onmouseover="this.className='imageTwo'" rows="10">kode HTML atau Script anda letakkan di sini</textarea></div></form>

KETERANGAN :

Atur ukuran rows & cols-nya, sesuaikan dengan panjang-pendeknya kode HTML atau Script anda.


Selamat mencoba, good luck!