Add A Zoom/Spectacular Jquery Inner Zoom Effect To An Image in Blogger

   

You might have seen various types of zoom effect on some blogs but this type of zoom effect is amazing. This zoom effect appears inside the image. When someone hovers the mouse over the image the then the image zoom effect is appear in the image internally. You need a HD image if you want to see zoom effect deeply. Now this tutorial will show How To Add a Zoom/Spectacular jQuery Inner Zoom Effect to an image in Blogger.

☻  HOW TO ADD  ZOOM/SPECTACULAR JQUERY INNER ZOOM EFFECT TO AN IMAGE TO BLOGGER

1) Go to  Blogger Dashboard (DropDown Menu)  -->  Template  -->  Edit HTML  -->  Proceed
2) Backup your  Template  before making any changes to your blog
3) Now Expand Widget Templates
4) Find the code shown below using  [ctrl+F] or F3.

</head>

5)  Replace  the above code with the code shown below.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://js.howtouses.com/blogger/imagezoomeffect.js' type='text/javascript'/>

</head>

5) Click save Template and preview your blog.

☻ NOW HOW TO ADD ZOOM EFFECT

♥ To Add This Effect You Have To Add This Code To The Image

class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"

   
 



IN A REGULAR IMAGE IT WOULD LOOK LIKE THIS

<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlqIYc3m9xHEZP4OaaWHy7odYWW-9PKwA-PUHORwDzzHtfZRCQeWZUT7rbHSMtUMHlZ5UWPrpIPgSiz4qCfKP_H5-IUP8l3ordhAu_NFpYB50XpxmVn16TS0-ck6jL4yvnPn4TN0waOWM/s1600/large.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlqIYc3m9xHEZP4OaaWHy7odYWW-9PKwA-PUHORwDzzHtfZRCQeWZUT7rbHSMtUMHlZ5UWPrpIPgSiz4qCfKP_H5-IUP8l3ordhAu_NFpYB50XpxmVn16TS0-ck6jL4yvnPn4TN0waOWM/s1600/large.jpg"/></a>

AND FOR BLOGGER IMAGE IT WOULD LOOK LIKE THIS

<div class="separator" style="clear: both; text-align: center;"><a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Tno07Q-9Eb6val8AHAW512yRPsKobrjKj564T9LXL2ETooq1rilxIM3TJGYA_47XTdXZIad3-P-CyUp4aPgAFd8bRGYPxaG-kQEhEiV7tjLCochXm_ud-EcXXi7AvIGMG9mA1oyQqNg/s1600/best-nature-full-hd-wallpapers-17.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Tno07Q-9Eb6val8AHAW512yRPsKobrjKj564T9LXL2ETooq1rilxIM3TJGYA_47XTdXZIad3-P-CyUp4aPgAFd8bRGYPxaG-kQEhEiV7tjLCochXm_ud-EcXXi7AvIGMG9mA1oyQqNg/s1600/best-nature-full-hd-wallpapers-17.jpg"/></a></div>

Easy, Make sure you have the script in the right place, If you already have jQuery in your template remove the line shown and add the snippet to your image code.