1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see ]]></b:skin> tag .
3.Copy below code and paste it just after the ]]></b:skin> tag.
<script src='http://keerthiset2.110mb.com/jQuery%20Image%20Zoom/jquery.js' type='text/javascript'/>
<script src='http://keerthiset2.110mb.com/jQuery%20Image%20Zoom/jquery.jqzoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function(){
$("img.jqzoom").jqueryzoom({
xzoom: 200, //zooming div default width(default width value is 200)
yzoom: 200, //zooming div default width(default height value is 200)
offset: 10 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")
});
});
</script>
<style type='text/css'>
div.zoomdiv {
z-index : 100;
position : absolute;
top:0px;
left:0px;
width : 200px;
height : 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;
}
img.jqzoom{
cursor:crosshair;
position:relative;
}
</style>
Important !!! : Download jquery.js and jquery.jqzoom.js as a zip file from here and host jquery.js and jquery.jqzoom.js yourself.
NOW CLICK SAVE TEMPLATE
Go to Layout-->Page Elements and click on "Add a gadget".
Select "html/java script" and add the code given below and click save.
<span class="tozoom"><img alt="LARGE-IMAGE-ADDRESS" src="SMALL-IMAGE-ADDRESS" class="jqzoom"/></span>Look at the example below.
<span class="tozoom"><img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6V8bg4ZMXS883SPcdsn-wy4K-gb1hhWqeG8-K1BR_CTw5kWoS4CNbMcsDyFgK23wM7RU2dc1l4S5RW6WINlZNHL9uvn2-Jl-EQe8teurzMEVRQkQKhqqWFOABezR8GLE7JhAwBcg0I36/+Zoom+Image+big.jpeg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MpJztCNZ_70IAlWuspysHAreHJ3mHlYs6yz7kUp_83ZdkFvdq0oz65mZbd3wFAtTiiTjrO39yTWDkL1VevAkV_V8bPrxp5Xbbar1QEjrl6MxUsKpnA-Bg4lQtN3IpwepHhRbe4-64j2i/+Zoom+Image+small.jpg" class="jqzoom"/></span>
NOW CLICK SAVE
Relax and enjoy, don't be rush.
ConversionConversion EmoticonEmoticon