DEMO: silakan arahkan cursor mouse ke gambar di samping!
HOW TO ADD ZOOM EFFECT IN YOUR BLOG?
1. go to Blogger Dashboard > Template
2. Download a copy of your template
3. Now click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates checkbox
6. Use ctrl F to find ]]></b:skin> and paste the following code above/before it.
Ada beberapa kode. Recommended: Pilih Kode 1
KODE 1
.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}
ATAU
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}
KODE 2
.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;
}
KODE 3 (ALTERNATIF)
.zoomeffect 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 10px 5px 0;
}
.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
7. Click on Save the template!
Untuk KODE 3 (Alternatif), ada tambahannya berikut ini:
HOW TO ACTIVATE IT ON IMAGES?
Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect.
Example:
Your image class in post editor will be <div class="seperator", now change it to
<div class="zoomeffect"
If you are adding it to any other part on your blog, you can use the following code.
If you are adding it to any other part on your blog, you can use the following code.
<a class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL" /></a>
Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!
<img src="http://YOUR-IMAGE-URL" /></a>
Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!
Cara Menambah Efek Zoom pada Gambar Blog
