AUTO ZOOM EXPANDO

This trick is to make a picture can be zoom automatically if there is was a cursor move on to that picture, like that beside picture:1. To use this trick, first you must insert HTML code before. The code that must be inserted are:

<style type="text/css">img.expando{ /*sample CSS for expando images. Not required but recommended*/border: none;vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/}</style><script type="text/javascript" src="Your Uploading Script.js">/* Expando Image Script ©2008 John Davenport Scheuer as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1 - This Notice Must Remain for Legal Use */</script>

That code must be inserted right before </head>

2. Download the script and upload.

For download click this link script zoom. And after that change the your_URL_uploading_JAVASCRIPT with your script url.
Save your template.To applied that script into our blog, we must put some code to HTML picture code like this.

1. For example you have upload that picture to photobucket with URL like this one: http://sXXX.photobucket.com/yourfile.jpgYou put in your blog, like this one:

<p><img class="expando" border="0" src="http://sXXX.photobucket.com/yourfile.jpg" width="100" height="75"></p>

2. If you upload the picture directly to blogger.com, you will get the code like this

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_8MouYPk5TEBctpwSDYafIC0yLmcKVFKUUelHVQNScI-u_FiFdBZTsf_NaD-z9bA-pfqJhhz94py9CMZxCwxGsbIPEmE25Km5GAq5TA64BanQ0ck9LZM7AfBP8SwaAy12jYXDWKFYSBA/s1600-h/tipsandcara.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 150px; height: 60px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_8MouYPk5TEBctpwSDYafIC0yLmcKVFKUUelHVQNScI-u_FiFdBZTsf_NaD-z9bA-pfqJhhz94py9CMZxCwxGsbIPEmE25Km5GAq5TA64BanQ0ck9LZM7AfBP8SwaAy12jYXDWKFYSBA/s400/tipsandcara.gif" alt="" id="BLOGGER_PHOTO_ID_5318144288050868514" border="0" /></a>

You must change into like this………

<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_8MouYPk5TEBctpwSDYafIC0yLmcKVFKUUelHVQNScI-u_FiFdBZTsf_NaD-z9bA-pfqJhhz94py9CMZxCwxGsbIPEmE25Km5GAq5TA64BanQ0ck9LZM7AfBP8SwaAy12jYXDWKFYSBA/s1600-h/tipsandcara.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_8MouYPk5TEBctpwSDYafIC0yLmcKVFKUUelHVQNScI-u_FiFdBZTsf_NaD-z9bA-pfqJhhz94py9CMZxCwxGsbIPEmE25Km5GAq5TA64BanQ0ck9LZM7AfBP8SwaAy12jYXDWKFYSBA/s400/tipsandcara.gif" alt="" id="BLOGGER_PHOTO_ID_5318144288050868514" border="0" width="75" height="30"/></p>

The size (width & height) that you put into code are the size that will be look in your post or your blog. In another word that are a reduce size from the original.For example, original size width=400 and height=400, you must put the size smaller than original, example width=200 and height=200.

Enjoy it.