Jquery Image Zoom Effect For Blogger

This Effect will help to view your high resolution
images with Zooming,Follow below steps to add
it to your blog.

Demo

1. Log in to blogger and Go to Design >> Edit HTML

5. Now find  </head> tag

3. Paste below code before </head> tag

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://wierdwalker.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>

jQuery(function($){

$(&#39;a.zoom&#39;).easyZoom();

});

</script>

    

4. Paste below code before ]]></b:skin> tag

#easy_zoom{
width:600px;
height:400px; 
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

5. Now When you creating a post you can add following Code. (by Edit HTML)

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="Image url" imageanchor="1" 
style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="205" src="Image url" width="320" /></a></div>

* Replace image URL with your image URL
* You can change image size by changing 205, and 320 value.

6. Now preview post and Click Publish Post.
      You are done,