Imágenes en tu blog y su manipulación | blogsmadeinspain

Aquí encontrarás plantillas para Blogger diseñadas por mí totalmente gratuitas, conocerás como se manipulan imágenes, fondos, texto, enlaces o links, los mejores widgets o gadgets, herramientas y utilidades, etc... Y además puedo diseñarte una plantilla exclusiva para tí, totalmente a tu gusto, y solo por 38 Euros.

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.

7 comentarios:

La Blogueria dijo...

¡Muy buena explicación!

¡Saludos!

Nara dijo...

Antes de preguntar me he leido los post sobre insertar imagenes,aun con esto, el lenguaje html es como el chino(por ahora)
He conseguido meter las tres fotos en Creacion de entradas,y segun las instrucciones tengo que abrir otra pestaña del navegador e insertarlas,Esto es para comprobar si es la ruta correcta???

Nara dijo...

Aha he localizado las rutas de las tres fotos,voy a continuar.

blogsmadeinspain dijo...

Sigue literalmente las instrucciones, verás como te sale.

Nara dijo...

Jolin, me olvide de quitar esa parte. Son tantas cosas y esto cada paso que das se mueve toda la plantilla.
Las tortugas recorren medio mundo, yo tambien llegaré.
Muchisimas gracias

Gorka Garcia dijo...

Hola estoy intentanto poner unas imagenes dentro de un menu desplegable. cada menu y submenu con su pequeña imagen a la izq. el codigo donde lo inserto.
¿en "Edicion HTML" y en donde? o ¿en el gadget del menu?
Muchas gracias

Blogsmadeinspain dijo...

Gorka, lo siento pero no puedo ayudarte. Hay infinidad de tipos de menú desplegables, con infinidad de códigos diferentes.