Monday, 9 November 2015T11/09/2015 12:01:00 pm

CARA MEMBUAT EFEK ZOOM OTOMATIS PADA GAMBAR ARTIKEL YANG DI POSTING DI BLOG

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.
Previous
Next Post »
0 Komentar untuk "CARA MEMBUAT EFEK ZOOM OTOMATIS PADA GAMBAR ARTIKEL YANG DI POSTING DI BLOG"

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

Terima Kasih Sudah Berkomentar

PENDAPAT ANDA TENTANG BLOG INI ?

Follow by Email

 
Copyright © 2014 uduy macal blog's - All Rights Reserved
Template By Kuncidunia
DMCA.com Protection Status