Hey Sob? kali ini saya akan membahas cara bagaimana caranya untuk membuat efek kedip gelap terang pada gambar di blogger atau bisa disebut juga dengan efek hover. Efek hover ini dapat menjadi percantik blog anda karena dengan di tambahkannnya efek ini membuat blog anda semakin canggih di lihat oleh orang yang membaca dan melihatnya.
Efek kedip gelap jika tidak di sentuh dan terang ketika di sentuh oleh mouse di gambar itu yang di sebut dengan efek hover. Efek Hover merupakan efek yang membuat gambar menjadi transparan ketika gambar tersebut di sentuh atau di lewati oleh kursor mouse, nilai transparan menjadi 0%. Oke bagi anda yang penasaran dengan cara membuat efek kedip atau efek hover pada blog dengan css silahkan saja ikuti cara berikut ini.
1. Login pada blog anda
2. Masuk menu "Template" dan klik "Edit HTML"
3. Lalu anda cari kode "]]></b:skin>" (gunakan ctrl+f untuk mempermudah pencarian dan tidak menggunakan tanda kutip)
4. Masukan kode di bawah ini tepat diatas kode ]]></b:skin> tadi
a.thumbopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
5. Lalu "Save Template"
6. Sekarang buatlah entri baru atau edit postingan anda yang ingin di berikan gambar dengan efek kedip hover
7. Klik menu "HTML"
8. Masukan kode di bawah ini pada gambar yang ingin anda beri efek
<a href="http://www.heysob.my.id" class="thumbopacity" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiejtQhWkE4NroQqMj4AaS0TC8HISE67H0rIgvzWDP52toCX7ga01Z0x4hWKsT8RC-KAjRu9QrpAWkGw0hauuhLlM8u-OoJKvCKxUqiCZIcjP5NS7ltS0f8PTzk1CJK18cWY5jxfjhcfnk/s1600/masuk+pintu.jpg" /></a>
Keterangan :
- Ganti kode yang berwarna merah dengan link blog anda
- Ganti kode yang berwarna biru dengan link gambar yang ingin diberi efek Hover
9. Terakhir "Publish" atau save, dan lihat hasilnya.
Oke mungkin itu saja yang bisa kita berikan mengenai artikel "Cara Membuat Efek Kedip pada Gambar di Blog" ini, semoga dengan apa yang sudah kita berikan ini dapat bermanfaat bagi Kalian. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar. Terimakasih.
Posting Komentar