Firstly Download these two scripts to your computer FancyZoom.js and FancyZoomHTML.js
Upload these files to your server which you use to upload js files or check from here.
Login To Blogger Now Goto LAYOUT > Edit Html and Find </head> tag
Place the below codes before it.
<script src='http://Your_upload_url/FancyZoom.js' type='text/javascript'></script>
<script src='http://Your_upload_url/FancyZoomHTML.js' type='text/javascript'></script>
Change the scripts url above in red to yours where you uploaded these js files.
Now find this code <body> in your template codes.
And replace it with the below code:
<body onload="setupZoom()">
Now Click SAVE TEMPLATE
Now whenever you embed image in your post use cods like this below-
<a href="http://img2.pict.com/ef/2a/93/d6ba88943e19c2608b3e7b88f8/yZOfg/800/holocaustremembranceday.gif"><img height="200" src="http://img2.pict.com/ef/2a/93/d6ba88943e19c2608b3e7b88f8/yZOfg/800/holocaustremembranceday.gif" width="300" border="0" /></a>
Width="300" and height="200" are the size of images that are shown in the post,so that the shown images are smaller that the original images.Means whats the actual size of the image make it small in post so that when someone click it will zoom up to its original size.
When you click theses images they will be zoomed on your same screen and click zoomed image again to make it small again.
For Demo check the image on this blogger and click it, to zoom it and then click again zoomed image to make it small.
I hope you would like this hack for sure. Best Of Luck !!
No comments:
Post a Comment