Dalam tutorial kali ini saya akan membagikan ilmu tentang bagaimana cara membuat zoom otomatis pada gambar yang di posting di blog sobat. zoom pada gambar ini berfungsi untuk memperbesar tampilan gambar / foto yang sudah kita posting di blog, ini berlaku untuk semua gambar yg ada di artikel blog sobat.
Kelebihan yang kita dapatkan saat memasang zoom efek pada gambar ini adalah terlihat lebih menarik dan profesional. cara kerja dari zoom efek gambar ini adalah gambar akan membesar ketika cursor visitor blog sobat menyentuh gambar - gambar yang berada di postingan blog sobat (Lihat Demo nya dibawah ini ). kode untuk membuat gambar ini murni menggunakan css tanpa ada tambahan javascript atau jquery, sehingga tidak mempengaruhi pada page loading blog sobat.
DEMO
Adapun cara membuat agar gambar efek zoom gambar di blog adalah sebagai berikut:
1. salin / copy kode berwarna merah dibawah ini terlebih dahulu
.post img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 2px 2px 0;
}
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
2. Selanjutnya masuk ke akun blogger sobat.
3. Lalu pilih Edit HTML
4. Selanjutnya cari kode ]]></b:skin> (gunakan ctrl + F untuk menemukannya)
5. Jika sudah ditemukan , selanjutnya pastekan kode diatas yg berwana merah tepat diatas kode
]]></b:skin> tersebut.
6. Selanjutnya Simpan Template.
Silahkan lihat hasilnya di blog sobat. demikian posting saya kali ini, semoga dapat bermanfaat. salam blogger.
0 Comments
Silahkan tinggalkan komentar dibawah ini,
Terima kasih sudah :
1. Berkomentar dengan sopan
2. Tidak meninggalkan link aktif dalam form komentar
3. Berkomentar sesuai postingan / artikel
4. Tidak membuat komentar yang mengandung SARA / SPAM
5. Memberikan informasi link / script yang tidak berfungsi