Thumbnail para Blogger

Para este tema es importante que sepan manejar una imagen en HTML como muestro en la entrada: Cómo colocar imágenes en Blogger - Google+. Usar un Thumbnail en Blogger es algo muy fácil, solo debemos agregar las siguientes partes (en color) después de la URL de la imagen:

Código HTML de una imagen centrada en Blogger:

<div class="separator" style="clear: both; text-align: center;">
<a href="URL que redirecciona la imagen" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL de la imagen" onmouseover="this.width=500;this.height=300;" onmouseout="this.width=100;this.height=60;" width="100" height="60" /></a></div>

Un ejemplo:


Importante: Algunas veces cuando cargamos una imagen en Blogger, esta podría venir con un width y height incorporado; entonces solo debemos borrarlos y dejar los que usaremos en color verde. 

Este es un código normal para una imagen:

<img src="URL de la imagen" onmouseover="this.width=500;this.height=300;" onmouseout="this.width=100;this.height=60;" width="100" height="60" />

La parte que está en color rojo es el tamaño que tendrá la imagen al pasar el puntero del mouse/ratón sobre ella, width es ancho y height es alto.

La parte que está en color verde, es el tamaño que tendrá la imagen cuando no se pase el puntero del mouse/ratón sobre ella.

Pueden cambiar las medidas a su gusto.

Recuerden que si usan una imagen con código HTML de Blogger, agregándole target="_blank" al código después del link que redirecciona, hacen que el link se abra en otra ventana o pestaña.

Ejemplo:

 <div class="separator" style="clear: both; text-align: center;">
<a href="URL que redirecciona la imagentarget="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL de la imagenonmouseover="this.width=500;this.height=300;" onmouseout="this.width=100;this.height=60;" width="100" height="60" /></a></div>


Espero que este tema les sea de mucha utilidad.

Gracias.
Cómo se agrega un thumbnail en Blogger, cómo se hace que una imagen crezca en blogger, código para hacer crecer una imagen al pasar el puntero del mouse sobre ella, tutorial para agregar un thumbnail en blogger, efecto para que crezca una imagen en blogger,