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 problemas en los blogs.

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 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 del blog.

Para saber cuanto 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 ve el valor que tienes definido para Blog completo. De ese modo sabrás el tamaño de la imagen que puedes usar y servirá de base para hacer los ajustes.

Subir la imagen a la cabecera en las nuevas plantillas

Vamos a suponer que ya tienes una imagen lista para usar, (puedes encontrar muchas aquí ). Entonces, veamos cómo ponerla en el blog ;)

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, si la imagen es más grande o igual que el ancho del blog completo.

Reducir hasta ajustar

También, selecciona las opción para la ubicación de la imagen, de las opciones que permite, como:

• Detrás del título y la descripción
• En lugar del título y la descripción
• Colocar la descripción después de la imagen

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.

Haz click para ampliar

 Paso 4: Finalmente guarda los cambios. 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í...

Ejemplo 2. Cambiar el tamaño de la imagen 

Usando la misma imagen, 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;
height: 220px;
}

Nota: los valores para el ancho (width) y el alto (height) 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?
Es muy fácil  hacerlo y en mi opinión, es la mejor opción, considerando que ahora Blogger cuenta con un directorio de fuentes que están muy monas,  y que puedes usar en el título del blog. Algunas de ellas aún están en periodo de prueba, en Blogger Draft, pero ya es posible aplicarlas en el blog desde ahí.

Usaremos la misma imagen del ejemplo anterior, pero ahora no tendrá título ni descripción grabada sobre la imagen,  esta 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 titulo 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, 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...
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 ;)

Nota: Si deseas que el ancho de la imagen cubra el ancho completo del blog, echale un vistazo a este post.

Espero que esto te sea útil =)

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