How To Add Zoom Effect for images in blogger

Posted by Lasantha Bandara on May 20th, 2009 File Under : change template, html, image2 Comments

1.Log in to your dashboard--> layout- -> Edit HTML

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://2.bp.blogspot.com/_4HKUHirY_2U/Sw5MsDJR85I/AAAAAAAAAV0/u-DmS25Jb-g/zoom+image.jpg"><img border="0" width="200" src="https://2.bp.blogspot.com/_4HKUHirY_2U/Sw5MsDJR85I/AAAAAAAAAV0/u-DmS25Jb-g/zoom+image.jpg" height="200"/></a>

Demo

File Under : change template, html, image

2 Responses to “How To Add Zoom Effect for images in blogger”

  1. Faizan says:

    Gr8 Frnd

    Funny Sms Collection
    http://www.smsheart.blogspot.com

    Funny Jokes
    http://www.kid-show.blogspot.com

    Watch Live TV Channels
    http://www.livetvzone.blogspot.com

  2. Faizan says:

    Nice Blog Friend

    Cute Messages
    http://smsenjoy.blogspot.com

    Funny Babies Wallpapers
    http://babies-wallpapers.blogspot.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.