martes, 31 de mayo de 2011

Aumentar imágenes con Javascript en Blogger

Este tutorial es bastante útil cuando queremos mostrar las imágenes maximizadas en nuestras entradas y que éstas no se muestren en una ventana externa al hacer clic en ellas. Las imágenes aumentarán al pasar el cursor por sobre ellas y no será necesario añadir un enlace para verlas en un tamaño mas grande.

Vista Previa:





¿Cómo añadirlo en Blogger?:


Paso 1: Añadiendo el script:

En ''Diseño | Edición HTML'', buscaremos la siguiente sección:

</head>
Arriba de esta, pegaremos el siguiente código:

<style type='text/css'>
img.aumentar{
border: none;
vertical-align: top;
cursor:url(&quot;http://1.bp.blogspot.com/-nvfQcYkUw2s/TeUXW9pgD9I/AAAAAAAABBo/Fpgt75Dx1WY/s1600/cursorzoom.png&quot;), pointer}
</style>

<script charset='ISO-8859-1' src='http://dl.dropbox.com/u/28164309/aumentarimagenes.js' type='text/javascript'/>


Guardamos los cambios y listo:


Paso 2: Añadiendo zoom a una imagen:

En ''Edición de HTML'' de las entradas, pega el siguiente código:
<img class="aumentar" src="URL IMAGEN" width="200" height="150"/>

En donde deberás reemplazar lo siguiente:
  • src="URL IMAGEN" (Dirección URL de la imagen)
  • width="200" (Ancho de la imagen)
  • height="150" (Altura de la imagen)


No hay comentarios:

Publicar un comentario