Cara Membuat Textarea Dengan Efek Hover

Textarea sangat beragam modelnya. Salah satunya yang

dibahas kali ini, yaitu " Cara Membuat Textarea Dengan

Efek Hover ". Contohnya seperti di bawah ini. Cobalah

letakkan cursor anda di atas textarea ini :

Textarea sangat beragam modelnya. Salah satu modelnya adalah seperti ini.

Adapun untuk cara membuatnya adalah sebagai berikut :

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:#FFFF00;<br /> }<br /> <br /> textarea.imageTwo{<br /> background-color:#00FFFF;<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
sebelum kode HTML atau Script anda :

<textarea
rows="8" cols="40"
class="imageOne"
onMouseOver="this.className='imageTwo'"
onMouseOut="this.className='imageOne'">

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

Jadi susunannya akan seperti ini :

<textarea
rows="8" cols="40"
class="imageOne"
onMouseOver="this.className='imageTwo'"
onMouseOut="this.className='imageOne'">

kode HTML atau Script anda letakkan di sini

</textarea>

KETERANGAN :

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


Selamat mencoba, good luck!


Baca juga " Cara Membuat Textarea Plus Select All Dengan Efek Hover "