Ampliar una imagen en Blogger.

Blogger permite la publicación de imágenes en tres tamaños: pequeño, mediano o grande, siendo el tamaño del lado más largo 144, 288 y 400 px respectivamente, siendo este último el que se ha utilizado para subir esta imagen.

Se puede cambiar el tamaño pero para ello tenemos que modificar el código html. Aquí os describo un modo de hacerlo:

1.- Crear la entrada y subir la imagen del modo habitual.

2.- Cambiar el modo de edición a HTML, veremos un código como el del cuadro.

<a href="http://3.bp.blogspot.com/_ot9YpCgDirU/R55AiyEfr7I/AAAAAAAABVc/xS4I3zJkqmQ/s1600-h/P1170179-1.jpg"><img style= "display:block; margin:0px auto 10px; text-align:center; cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_ot9YpCgDirU/R55AiyEfr7I/AAAAAAAABVc/xS4I3zJkqmQ/s400/P1170179-1.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5160633189313523634" /></a>

3.- Donde se define el estilo de imagen [img style] y tras las comillas se copia y pega el código siguiente:

WIDTH: mmmpx; HEIGHT: nnnpx;

sustituyendo mmm por el valor del ancho deseado y nnn por el alto en pixeles, teniendo en cuenta que estos valores deben guardar la relación ancho/alto de la foto original y que no debemos superar el ancho de la side bar principal para no descolocar los elementos del blog.

4.- Por último, hemos de evitar la pixelación de la imagen debida al aumento de tamaño de la misma. Para ello, hemos de tener en cuenta que Blogger aloja las imágenes subidas en álbums web de Picasa, guardando cada una en cuatro tamaños, miniatura 144 px, pequeña 288 px, mediana 400 px y grande 800 px.

Así, lo que tenemos que hacer es cambiar nuestra referencia de la imagen por otra de mayor tamaño sustituyendo en el código html /s400/ por /s800/, el enlace a la imagen se encuentra dentro del código [scr=""], justo antes del nombre del archivo.

5.- El código, para esta imagen, cuya relación ancho alto es de 4:3 subida a 400 px de ancho y 300 px de alto que se quiere ampliar a 560 pixeles de ancho y 420 de alto, sería:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLkmhT8lIePQg8Ca-i3JdP0SzVStv5E8RHhDGQXK1SAqow-wP-0HUvFmSjZi1eJW5Gq9K6fGMxTdOYr_0LSeu4XraLJWIG-2CxhF4yhNr9vwRoTCBhNExIGe8aNwZO6Z9wKMxaQsexOQ/s1600-h/P1170179-1.jpg"><img id="BLOGGER_PHOTO_ID_5157678219474877698" style="WIDTH: 560px; HEIGHT: 420px; DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLkmhT8lIePQg8Ca-i3JdP0SzVStv5E8RHhDGQXK1SAqow-wP-0HUvFmSjZi1eJW5Gq9K6fGMxTdOYr_0LSeu4XraLJWIG-2CxhF4yhNr9vwRoTCBhNExIGe8aNwZO6Z9wKMxaQsexOQ/s800/P1170179-1.jpg" border="0" /></a>

La foto quedaría así:


Nota: en el paso 3 suele bastar indicar sólo el ancho de la imagen, con lo que se evita así realizar cálculos para determinar el valor del alto de la imagen a partir de la relación entre las dos dimensiones.


Post revisado el 21/11/2009.