Teks Area dengan Flip Background Image

Teks area dengan Flip Background Image, Pada postingan kali ini, Blog tips and Trick akan membahas tentang cara membuat text area dengan 2 background gambar yang akan berubah dengan mouse over, mungkin para blogger ataupun anda sudah tak aneh lagi dengan yang namanya Teks area yang sering anda lihat pada setiap blog ataupun website, dimana terdapat beberapa tulisan yang terletak pada kotak teks area tersebut. tapi bagaimana dengan kotak teks area yang mempunyai background gambar serta warna tulisan yang bisa berubah dengan mouse over....
mungkin sebagian dari anda masih banyak yang belum tahu tentang trik ini. contohnya kurang lebih seperti dibawah ini, coba anda gerakan mouse anda ke kotak area dibawah ini, Tulisan dan gambar backgroundnya akan berubah dengan digerakannnya Mouse Anda/Arahkan Mouse Anda ke Dalam Text Area nya

Apa sih Shoutbox itu ? Shoutbox adalah sebuah widget yang mempunyai fungsi yang tidak jauh berbeda dengan chatting, dimana semua pengunjung ataupun pemilik blog itu sendiri.bisa saling mengirimkan pesan-pesan singkat seperti perkenalan, pemberitahuan dan lain sebagainya. Bila kita melihat blog ataupun website yang sudah memasang shoutbox, biasanya shoutbox ini terletak pada halaman depan blog ataupun website tersebut, karena dengan adanya Widget shoutbox ini sangat memudahkan bagi para pengunjung untuk berkomunikasi secara langsung dengan pemilik blog ataupun dengan pengunjung lainnya secara bersamaan

http://boma-internet.blogspot.com

Bagi anda yang berminat untuk membuat teks area seperti pada contoh di atas pada begian postingan anda, caranya adalah sebagai berikut ini.

1. Anda copy semua kode dibawah ini, lalu paste kode tersebut tepat dibawah kode ]]></b:skin> pada bagian halaman Html template anda.

<style>
textarea.imageOne{
background-color:#000000;
background-image:url(Masukan Link gambar anda disini);
color:#00ff00;
}
textarea.imageTwo{
background-color:#000000;
background-image:url(Masukan Link gambar anda disini);
color:#ff0000;
}
</style>

2. Setelah itu klik simpan/save.


Keterangan :.

Silahkan anda rubah tulisan yang dicetak tebal dan berwarna kuning diatas sesuai dengan yang anda inginkan. misalnya  pada bagian  textarea.imageOne, tertulis background-color:000000; yaitu untuk warna background. background-image:url(Masukan Link gambar ana disini); yaitu untuk background gambar, silahkan anda masukan link gambar yang anda inginkan. dan color:ff0000; yaitu untuk warna Teks. semua kode yang ada pada bagian bawah textarea.imageOne, yaitu gambar ataupun warna Teks yang akan tampil pertama dan kode yang terdapat dibawah textarea.imageTwo, yaitu yang akan tampil ketika mosue digerkan atau Mouse over.http://boma-internet.blogspot.com

3. Setelah anda selesai mencopy, meng-edit dan mempaste semua kode diatas. sekarang adalah cara memasukan kode Teks area kedalam postingan. caranya yaitu anda copy kode dibawah ini terus anda masukan kedalam postingan anda.

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

 Tulis teks yang anda inginkan disini 

</textarea>

Keterangan :

Bila anda ingin merubah ukuran Teks area tersebut. silahkan anda ganti ukuran rows dan cols-nya seperti yang dicetak tebal dan berwarna kuning pada bagian kode di atas.  rows yaitu untuk ukuran tinggi dan cols untuk ukuran lebar kotak teks area tersebut.

4. Selesai.

Silahkan mencoba dan semoga bermanfaat. salam blogger mania.

Sumber Blog Tips And Trick