Imágenes en tu blog y su manipulación

Un componente importantísimo en tu blog serán, casi con total seguridad, las imágenes. Ya sean de caracter decorativo, informativo en los "post", como "divider", o como enlace, sin lugar a dudas que deberás conocer como se insertan imágenes, y sus manipulaciones principales.

Tendrás dos formas de hacerlo:

La primera es desde el propio menu de "Blogger", tanto en "creación de entradas/crear", como en "Plantillas/Elementos de la página/Agregar elemento a la página", encontrarás la posiblidad de insertar imágenes, videos, y otros elementos.
Pero sus posibilidades de manipulación son muy escasas, si solo usas esta forma de insertar imágenes. Por lo que deberemos usar códigos html ...
Leer completo...[+/-]

Donde queramos situar una imagen, lo haremos como "Elemento html", con el siguiente código:

<img src="URL DE LA IMAGEN" >

Si además queremos señalar un tamaño concreto para la imagen, independientemente del tamaño que tenga, usaremos los parámetros width (anchura) y height (altura), de la siguiente forma:

<img src="URL DE LA IMAGEN" width="ANCHURA" height="ALTURA" >

Tened en cuenta que si solo se coloca una de estas dos variables, la imagen se reducirá o ampliará manteniendo su proporsión entre altura y anchura, pero si se colocan las dos esta proporsión puede romperse, y la imagen aparecer más alargada o ancha.

Otro modificador muy usado es para centrar la imagen en el elemento que lo contenga (post, sidebar, cabecera, etc...), se realiza añadiendo al principio y al final el siguiente código:

<center><img src="URL DE LA IMAGEN" width="ANCHURA" height="ALTURA"></center>

Por último, por ahora, veremos como posicionar una imagen en un lugar concreto del blog o del elemento que lo acoja:

<div style="position:absolute;top:100px;left:100px;"><img src="URL DE LA IMAGEN" width="ANCHURA" height="ALTURA"></div>

Con "absolute" indicamos que la posición está referida a la totalidad del blog. La otra opción sería colocar "relative", con lo que indicaríamos que la posición indicada se refiere al elemento donde está colocada la imagen.

En "top" indicamos la distancia en pixeles al borde superior, y en "left" la distancia en pixeles al borde izquierdo. (en el ejemplo se ha colocado "100" como orientativo, este valor dependerá de cada blog y de dónde quiera ponerse la imagen).
También podemos indicar la distancia al borde inferior (sustituyendo "top" por "bottom", y al borde derecho (sustituyendo "left" por "right").

HACED PRUEBAS, VERÉIS COMO ES MÁS FÁCIL DE LO QUE PARECE.