Efecto de zoom en las imágenes con jQuery

Luego entra en Diseño | Edición de HTML y pega antes de </head> lo siguiente:

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo .js' type='text/javascript'/>

Cambia lo que está en color rojo por la URL del archivo que previamente subiste al hosting.

Ahora antes de ]]></b:skin> pega esto:

#view {
border: 1px solid #333333; /* Borde de la imagen */
overflow: hidden;
position: relative;
width: 400px; /* Tamaño de la imagen */
}

#image {
display: block;
left: 0;
top: 0;
}

#zoom {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54LrWk7xpLcv6D22R-Ki0BVtlT5FNaJCpmGx83aNcAJxG5vdtsR8jw1r4oYxyzKE_pVcOe_ExHmUiq8iNdMg7aOHDqTxvqfgAM5xqH653sbZcpMkAQ6nQ-17xUD1o7CCliqqlSsIAk5Zv/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}

Por último usa este código cuando quieras ponerle el zoom a tus imágenes:

<div id="view">
<img id="image" src="URL de la imagen" width="400" />
</div>

Cambia la URL de la imagen donde se indica y listo.
Verás que tanto en los estilos como en el último código hay un ancho de 400px, este es el ancho que tendrá la imagen, si deseas cambiar el tamaño tendrás que cambiar ambos valores que están marcados en negrita.