02 October 2010

Add Zoom Effect for images to your Blogger Blog

You may have seen the zoom effect for images on various sites and wordpress blogs. Now you can add 'Zoom Effect for Images' to your Blogger Blog. Follow this simple tutorial to learn how.

Step 1. Go to your dashboard > Layout > Edit HTML > Expand Widget Templates

Step 2. Search for </head>  (type Crtl+F for fast search within the code)

Step 3. Add following code just 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'/>

Step 4. Replace <body> with <body onload='setupZoom()'>

Step 5. Save your template.

Step 6. Now that you have added the code for Image Zoom Effect to your template, you must add following code while adding any image to your post.

<a href="Image address"><img src="Image address" width="200" border="0" height="200" /></a>

Just replace "Image Address" with the url of the image you want to add.

Check out the Demo here.


Post a Comment