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 digerakkannya mouse anda.
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.
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.
0 komentar
Posting Komentar