2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag.
4.Now add below code before </head> tag.
| <script src='http://wam8387.110mb.com/FancyZoom.js' type='text/javascript'/> <script src='http://wam8387.110mb.com/FancyZoomHTML.js' type='text/javascript'/> |
Note:You must host FancyZoom.js and FancyZoomHTML.js files yourself.
5.Now replace the <body> tag with <body onload='setupZoom()'>
NOTE : If in your template already has <body onload="setupZoom()"> code instead <body> tag ,skip this step.
6.Now save your template.
You have already add zoom effect for images.
But,to zoom image you have to use this new form :
<a href="Image address"><img src="Image address" width="200" border="0" height="200" /></a>You must replace 'Image address' with your real address of image.You can change Height,Weight,.....
Look at the example code below.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-aUnAPnoVWP-HBLdkwgyVK69VIv2ZfNYuaQF8sr_WHILZ3jBa0CT6hjpPtQFRvdPWsFm9jxcvE_BGEurRG65NWOavRBvcBFJ542XiViAsO-1-3pb0e87GMSX6CI2uiiQbIIpZbehhxwEZ/+image.jpg"><img border="0" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-aUnAPnoVWP-HBLdkwgyVK69VIv2ZfNYuaQF8sr_WHILZ3jBa0CT6hjpPtQFRvdPWsFm9jxcvE_BGEurRG65NWOavRBvcBFJ542XiViAsO-1-3pb0e87GMSX6CI2uiiQbIIpZbehhxwEZ/+image.jpg" height="200"/></a>
Demo
0 comments:
Post a Comment