domingo, 13 de marzo de 2011

Agregar imagen de fondo en Blogger

En este tutorial veremos cómo modificar el fondo de nuestro blog. Esto es algo bastante sencillo y no requiere conocimientos avanzados.
Encontrarás instrucciones y algunas explicaciones a ciertos códigos para darle un buen formato a la imagen que hayamos asignado.

¿Cómo agregar una imagen de fondo en Blogger?

Primero, utilizaremos un código de ejemplo para entender mejor cómo agregar una imagen:
body { background:#dadada url(URL IMAGEN) top left no-repeat fixed; }

Explicaciones:

Color de fondo:
Este valor corresponde al color que se mostrará cuando la imagen no ocupe toda la pantalla o cuando la imagen esté cargando. El valor a reemplazar es #dadada

Ruta de la imagen:
Corresponde a la ubicación de la imagen. El valor a reemplazar es URL IMAGEN (Se encuentra en paréntesis) .

Ubicación de la imagen:
Corresponde a la zona en la que se situará la imagen en la página. Los valores a modificar son top left por otra ubicación (left, right, up, down, center).

Frecuencia:
Este valor corresponde a la forma en la que se representa la imagen de fondo en el blog. El valor a modificar es no-repeat. Puedes utilizar los siguientes:
repeat: Indica si la imagen se repetirá en toda la página (mosaico).
repeat-y: Indica que la imagen se repetirá de forma vertical.
repeat-x: Indica que la imagen se repetirá en forma horizontal.
no-repeat: Indica que la imagen no se repetira.
Visualización en la pantalla:
Este valor corresponde a dejar estática o desplazable la imagen en la pantalla:
El valor fixed, permite que la imagen se mantenga fija al subir o bajar la página.
El valor scroll, permite que la imagen suba o baje al hacer scroll en la página.


 Después que ya tenemos nuestro fondo configurado, pegamos el atributo en la plantilla de nuestro Blog:

Primero vamos a ''Diseño/Edición HTML'' en donde marcamos ''Expandir plantillas de artilugios'', buscas la siguiente línea:
></b:skin>
Arriba de éste pegas el código de tu imagen con los atributos.

Guardas los cambios y listo.

No hay comentarios:

Publicar un comentario