CONTOH NYA ANDA BISA LIHAT DI SAMPING BLOG AKU
Satu tips-trik sederhana lagi dari saya yaitu cara membuat image hover. Sebelumnya saya juga sudah memberikan tips Cara membuat Efek Mouseover Pada Gambar Di Blog. Untuk membuatnya kita hanya mengunakkan kode CSS dan modifaksi kode HTML gambar yang ingin dibuat efek image hover. Sebgai contohnya Anda bisa lihat 2 gamabar yang menggunkkan tips-trik ini :
Satu tips-trik sederhana lagi dari saya yaitu cara membuat image hover. Sebelumnya saya juga sudah memberikan tips Cara membuat Efek Mouseover Pada Gambar Di Blog. Untuk membuatnya kita hanya mengunakkan kode CSS dan modifaksi kode HTML gambar yang ingin dibuat efek image hover. Sebgai contohnya Anda bisa lihat 2 gamabar yang menggunkkan tips-trik ini :
Contoh 1 (Arahkan mouse Anda kegambar) :
Contoh 2 (Arahkan mouse Anda kegambar) :
Berikut ini adalah cara membuatnya :
1. Login ke akun Blogger
2. Klik Design
3. Klik tab menu Edit HTML
4. Letakkan kode CSS berikut di atas kode ]]></b:skin>
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
5. Klik Save Template
Langkah terakhir adalah menerapkkan kode CSS diatas. Untuk mnerapkkannya ganti kode HTML image Anda dengan kode HTML dibawah ini :
<a class="pic" href="LINK YANG AKAN DITUJU"> <img class="image1" src="URL IMAGE ASLI DISINI"/> <img class="image2" src="URL IMAGE HOVER DISINI"/></a>
Nah mudah dan sederhana bukan, trik ini sebenarnya mengunkkan 2 buah gambar yang berbeda seperti yang Anda lihat di kode HTML-nya. Untuk kode CSS diatas juga bisa Anda modifikasi lagi sesuka Anda. Selamat mencobanya Semoga bermanfaat.
0 KOMENTAR: