Posted by : Boma Rinaldy Sangaji Sunday, June 12, 2011


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



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

Leave a Reply

Admin Blog jarang memantau Blog di karenakan tugas di sekolah,Mohon maaf jika komentar belum di balas hingga saat ini Jadi mohon maaf atas ketidak nyamanan ini.
Silahkan komentar di bawah ini , Bila ada Komplain dan lain lain.
Dilarang berkomentar berbau SPAM, SARA, PORN, JUNK.

Gunakan Fasilitas Reply untuk menjawab pertanyaan

Spam adalah : dimana Seorang Blogger memasukan Link yg aktif di Kotak komentar
Komentar Tidak Selalu Langsung Saya Balas, Karena Saya Sibuk Dengan Sekolah, Saya Akan Balas Paling Lama 3 Hari, Kecuali Sedang Online. Terimakasih Atas Pengertiannya

Apabila Ada Kata-Kata Atau Tulisan Yang Salah Serta Komentar Yang Tidak Dibalas, Saya Mohon Maaf
Terima kasih sebelumnya [Boma-internet]

Subscribe to Posts | Subscribe to Comments

- Copyright © 2013 [Boma-interNet] - Hatsune Miku - Powered by Blogger - Designed by Johanes Djogan -