How to Add Zoom Effect On Your Blogger Images?

Zoom effect in images is one of the best things I always want to add in my blogger images. Zoom gives your image a new personality. So, if you are looking for something for your images like zooming on hover, then I’m telling you that you are at a right place. Well, zoom effect is of many kinds of examples: Cloud zoom effect, Classic zoom effect and many other. In this tutorial, I’m going to show you “How to add zoom effect to blogger images”? Let’s start!

•  First of all sign into your Blogger account.
• Go to dashboard and drop down the menu of your blog, if you have two or more blog then select a blog on which you can add zoom effect for images.
• Now click Template > Edit HTML. You can also download a copy of your template.
• Expand your HTML code.
• Use Ctrl+F to find ]]></b:skin> and paste  the following code above/before it.

• Click on save template.

How to activate it on blogger images?

Well, it’s not a big deal. It’s so simple and easy. Once you have done with coding then, all you have to do is just simply follow these steps to activate zoomeffect to your blogger images.

Whenever you have uploaded images in your post editor, switch to HTML mode. Change the class of your image whatever it is to “Zoomeffect”.

Example of the Zoom Effect:

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.
<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!