jQuery Image Zoom In Your Blog

Click this picture

Install jQuery image zoom in your blog

Login in your blogger
Click design
Click Edit Html, and dont forget to cek list expand ( dont forget to backup your template

Now follow my instruction

Search this code

]]></b:skin>

and copy this css in above code ]]><b:skin> (atas code ]]><b:skin>)

div.jquery-image-zoom {
 line-height: 0;
 font-size: 0;
 z-index: 10;
 border: 5px solid #fff;
 margin: -5px;
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
 background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
 display: block;
 width: 25px;
 height: 25px;
 position: absolute;
 left: -17px;
 top: -17px;
 /* IE-users are prolly used to close-link in right-hand corner */
 *left: auto;
 *right: -17px;
 text-decoration: none;
 text-indent: -100000px;
 outline: 0;
 z-index: 11;
}
div.jquery-image-zoom a:hover {
 background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
 width: 100%;
 height: 100%;
 margin: 0;
}

and now, search code

</head>

copy this script in above code </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type="text/javascript" src="http://jquery-for-myblog.googlecode.com/files/jquery.imageZoom.min.js"/>
<script type="text/javascript">
 jQuery(document.body).imageZoom();
</script>

save your template.

nb : If you ready install jQuery framework in above code </head> , you cant install code like

<script type="text/javascript" src="http://http://jquery-for-myblog.googlecode.com/files/jquery.imageZoom.min.js"/>
<script type="text/javascript">
 jQuery(document.body).imageZoom();
</script>

done.

Source From modification-blog