06 enero 2011

Colocar y Ajustar una Imagen en la Cabecera del blog en las Nuevas Plantillas


¡Hola, que tal! En este ocasión, te voy a compartir algo muy básico y útil a la hora de personalizar tu blog. Se trata de colocar y ajustar una imagen en la cabecera, cosa que he visto que causa muchos problemas en los blogs.

Antes de Empezar

Es muy importante saber la medida de la imagen que quieres colocar. Claro que dependerá de los resultados que busques pero, suponiendo que quieras que la imagen abarque el ancho disponible de la cabecera (excluyendo los margenes), es posible usar una imagen un poco más grande, o igual que el ancho del blog completo, para obtener resultados satisfactorios, aunque "te recomiendo" que la imagen sea del mismo ancho del blog ya que usar una imagen más grande, agregará más peso a la página.

Para saber cuánto mide el ancho del blog completo (mismo que tú determinas en las nuevas plantillas), selecciona la pestaña Plantilla, luego vas a Personalizar ► Ajustar ancho, y toma nota del el valor que tienes definido para Blog completo. Ese es el valor que servirá de base, ya que el ancho de la imagen deberá ser igual a éste, o menor, dependiendo del resultado que busques.

Una vez que tengas la imagen que vas a colocar en la cabecera del blog, sigue estos pasos:

Subir la imagen a la cabecera paso a paso


Paso 1: Ve a la pestaña  Diseño, y haz click en "Editar" en la sección que corresponde a la cabecera.

Haz click para ampliar

Paso 2: Asegúrate de activar la opción Reducir hasta ajustar, que aparece en las opciones de configuración:

Reducir hasta ajustar
También, selecciona la opción para la ubicación de la imagen, de las opciones que permite, como:
  • Detrás del título y la descripción. Que permitirá que el título y la descripción de tu blog, aparezca encima de la imagen.
  • En lugar del título y la descripción. Se mostrará la imagen en sustitución al titulo y la descripción del blog. En este caso lo conveniente es que la imagen tenga el titulo del blog, y la descripcion, siendo ésta última opcional. Por ejemplo, si vas a usar un logotipo, esta sería la mejor opción.
  • Colocar la descripción después de la imagen. Que evitará que se muestre el título del blog, pero sí se mostrará la descripción del blog. En tal caso, lo conveniente es que la imagen que vas a usar tenga el título.
Paso 3: Sube la imagen, ya sea desde una carpeta de tu computadora, o escribiendo la URL e la imagen en la opción que dice: Desde la web.


Configuracion imagen cabecera del blog
Haz click para ampliar

 Paso 4: Finalmente guarda los cambios en Guardar. Perfecto!, ya tienes una imagen propia en la cabecera del blog ;)


Ajustar una imagen más pequeña

Vamos a suponer que la imagen que quieres colocar, la vas a mostrar en lugar del título y la descripción.
Ahora la imagen es mucho más pequeña que el ancho del blog completo, mide 850 pixeles de ancho, y el blog completo mide 980 px., si seleccionas o no la opción reducir hasta ajustar, la imagen se irá hacia la izquierda, ya que es más pequeña que el ancho disponible.

 

Veamos como manipularla:

Ejemplo 1. Centrar la imagen de la cabecera o header


Paso 1: Ve a la pestaña Plantilla, luego a Personalizar►Avanzado►Agregar CSS y agrega las siguientes lineas, dentro del cuadro que está a la derecha:
#header-inner img {
margin: 0 auto;
}
Paso 2: Ahí, puedes ver los resultados, para guardar los cambios harás click en APLICAR AL BLOG.

Ahora la imagen se verá así...



Obviamente esta imagen que uso como ejemplo lucirá fea de ese modo, solo quiero ilustrarte con una imagen con bordes definidos los resultados, lo cual seguramente te resultará útil para otro tipo de imágenes.


Ejemplo 2. Cambiar el tamaño de la imagen 


Usando la misma imagen del ejemplo, pero ahora más pequeña, vamos a suponer que a esa imagen la quieres ampliar para que cubra todo el espacio disponible para la cabecera, entonces lo que harás es definir el ancho y alto de la imagen que se mostrará , y para ello,  harás lo mismo del paso 1 del ejemplo 1 (cuando la centramos), sólo que ahora vas a  escribir estas lineas de código:
#header-inner img {
width: 960px; /*Ancho*/
height: 220px; /*Alto*/
}
Nota: los valores para el ancho  (960px) y el alto (220px) son sólo ejemplos, tu deberás ajustarlos según el tamaño que quieres que muestre la imagen.

Luego, cuando consigas el resultado que buscas, haces click en APLICAR AL BLOG.

Ahora, la  imagen que mide 850 pixeles de ancho, se ve así, sobre un ancho del blog que mide 980 pixeles.


NOTA: Ten en cuenta que al ampliar la imagen, puede perder calidad, sobre todo si las medidas no son proporcionales a las de la imagen original.

Usar una imagen detrás del título y la descripción


Hasta aquí podemos manipular una imagen que es colocada en lugar del título y la descripción, pero ¿qué pasa si en lugar de usar una imagen que sustituya el título y la descripción, quieres que esta aparezca detrás del título y la descripción?

Usaremos la misma imagen del ejemplo anterior, pero ahora no tendrá título ni descripción sobre la imagen.  Ésta mide 980 pixeles de ancho, y el ancho del blog completo, también mide 980 pixeles.

Bueno, para empezar, al subir la imagen, (arriba las indicaciones) marcarás la casilla de reducir hasta ajustar, luego, seleccionas la opción Detrás del título y la descripción. Después guardas los cambios.

Mover el título del blog y la descripción

Si necesites mover un poco el título y la descripción, solo tienes que ir  Ir a Plantilla►Personalizar►Avanzado►Agregar CSS y agregar unas lineas de código para ajustarlos:
.header h1{
margin: 10px 0 0 40px;
}
.header .description {
margin:-20px 0 0 0;
}
Nota: Necesitas ajustar los valores según tus necesidades. El margen que está en .header h1 es para el título, y el que está en .header .description es para la descripción, y el margen se lee así:


Ejemplo:
 margin: 10px 0 0 40px; 
...quiere decir:  (10 pixeles)Arriba, (0 pixeles)a la derecha, (0 pixeles)Abajo, (40 pixeles) a la izquierda   

Puedes incluso, manipular la sección donde está la imagen, por ejemplo, poner borde alrededor de ésta:
#header-inner{
border: 2px solid #000;
}


Centrar una imagen más pequeña, cuando usas la opción detrás del título y la descripción


Si usas una imagen más pequeña, como en el caso de un logotipo, al subirla se mostrará hacia la izquierda, si quieres centrar la imagen, tienes que hacer lo mismo que el paso 1 del ejemplo 1, sólo que ahora usarás estas lineas de código para lograrlo:
#header-inner {
margin: 0 auto;
}
Ten en cuenta que esto también afectará al título de tu blog, ya que cuando seleccionas esta opción, el título se muestra en función al ancho de la imagen. Si quieres moverlo, sigue las mismas indicaciones allá arriba donde dice ajustar el título y la descripción.


Notas finales pero importantes

En algunos casos, las cosas no se ven igual en todos los navegadores, y aquí los problemas son visibles si la imagen es más grande o igual que el ancho del blog, y no seleccionas la opción de reducir hasta ajustar antes de subir la imagen.
    Si por ejemplo, colocas esta imagen que mide 980 pixeles, en lugar del título y la descripción, y el ancho del blog completo también mide 980 pixeles, al no marcar la casilla de reducir hasta ajustar, la imagen se verá incompleta en Firefox y Google Chrome...



    ...y aunque dependiendo de la imagen no puede ser notorio el problema en esos navegadores, en Internet Explorer, para no perder la costumbre, las cosas se verán peor:

                                                                                                      
    Y entre más grande sea la imagen,  más se va a salir o desbordar la imagen hacia la derecha, hasta llegar a provocar una barra de desplazamiento en el fondo de la ventana del navegador, si se excede el ancho de la resolución de pantalla del usuario. Como no queremos que eso pase, marca siempre la casilla de reducir hasta ajustar antes de subir la imagen ;)

    Otra opción:
    Si deseas que el ancho de la imagen cubra el ancho completo del blog, échale un vistazoesta entrada donde explico cómo hacerlo.

    Espero que esto te sea útil =)

    Revisado y actualizado usando la nueva interfaz de Blogger.

    Crédito de la imagen de la cabecera: blandless.com
    Referencias: Editar CSS en el diseñador de plantillas