Add jQuery Image Zoom Effect To Your Blog

Add The Css And Scripts

Step 1. In your Blogger Dashboard Click Design > Edit Html 
Step 2. Find the following piece of code.

]]></b:skin>

Live Demo

Step 3. Copy And Paste The Following Code Directly Above ]]></b:skin>

#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;
}

Step 4. Now Find the following piece of code in your blog.

</head>

Step 5. Copy and paste the following piece of code Directly Above </head>

Important - The code highlighted in blue is the main jQuery script, if you already have jQuery in your template. Then leave the highlighted code. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src='http://blogtipsntricks.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($){
$(&#39;a.zoom&#39;).easyZoom();
});
</script>

Step 6. Save Your Template, that's the jQuery and Css added now you just gotta add your images.

Adding The Image To Your Posts

When you upload a large image (Don't upload image smaller than 500px) to Blogger it will often be re-sized to fit your posts.The image code you upload will look as below and you simply add class="zoom" as highlighted :

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6uGbFhx6HU95_X4K5tCdtDHH0BzIjVmqoikR_wAomLwop6wf2t5DN9r5nqDt9dezmAmjcsnIWrsoLtaWyiqlfy53jRPwwiR4kzrL6pVm0P3a9ei3yzkC1MyjfJFzVbCKgG3lelPl6xzQ/s1600/WideScreen_Prince+of+Persia+The+Two+Thrones+03.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6uGbFhx6HU95_X4K5tCdtDHH0BzIjVmqoikR_wAomLwop6wf2t5DN9r5nqDt9dezmAmjcsnIWrsoLtaWyiqlfy53jRPwwiR4kzrL6pVm0P3a9ei3yzkC1MyjfJFzVbCKgG3lelPl6xzQ/s1600/WideScreen_Prince+of+Persia+The+Two+Thrones+03.jpg" width="320" /></a></div>