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.
Artikel Terkait:
Tutorial Blog
- Cara Membuat Link Bergeser
- Cara Membuat Menu Warna Warni
- Cara Memuat Spoiler Untuk Blog
- Headline News KATA SENDIRI
- Cara Memasang Widget Page Rank dengan mudah dan cepat
- Cara Pasang Related Post With thumbnails
- Pasang Navigasi Breadcrumb di Blogger Diatas Posting
- Efek For Blog
- Cara Membuat Backround Pada Judul Postingan
- Cara Membuat Link Beraneka Rgam
- Cara Membuat Kode warna Versi 2
- Cara Pasang Sexy Social Boommark
- Cara Membuat Menu Tab View
- menambahkan effect jquery link nudging pada tabel
- Cara Pasang Top Komentartor
- Tweety Bird Blogger Template
- Related post atau postingan terkait [With Tuhumbanail]
- Cara Mengganti Foto Profil Blog Dengan Animasi
- Cara Membuat Animasi Berjalan Dibawah tengah blog
- Cara Membuat Tag Cloud
- Cara Membuat Gambar ketika mouse diarahkan
- Isengin Pengunjung Yuk!!!
- Cara Membuat Bukutamu tersembunyi Versi TERBARU
- Cara Menampilkan Judulnya Saja Ketika label di klik
- Cara Pasang Slide Post
0 KOMENTAR: