Colocar y ajustar una imagen en la cabecera del blog en las nuevas plantillas

Hola chicos (as), 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, es posible usar una imagen más grande, o igual que el ancho del blog completo, para obtener resultados satisfactorios.

Para saber cuanto mide el ancho del blog completo (mismo que tú determinas en las nuevas plantillas), debes ir a Diseñador de plantillas►Ajustar ancho, y ver el valor que tienes definido para Blog completo. Eso te dará una idea 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, la vas a subir así:

Paso 1:Ve a diseño►Elementos de la páginas, y haz click en editar en la sección que corresponde a la cabecera.

Paso 2: Asegurate de marcar 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 del enlace de la imagen en la opción que dice: Desde la web.

 Paso 4: Finalmente guarda los cambios.


Importante saber que...

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 980px., en lugar del título y la descripción, y el ancho del blog completo también mide 980px...

 ...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 del monitor 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 ;) .

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. Si lo que quieres es centrarla, harás lo siguiente:

Paso 1: Ir a diseño►diseñador de plantillas►Avanzado►Agregar CSS y vas a escribir las siguientes lineas, dentro del campo correspondiente:

#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), solo 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 solo ejemplos, tu deberás ajustarlos según tus necesidades.

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 redimencionarla, puede verse algo distorsionada 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 estan muy monas,  y que puedes usar en el título del blog, algunas de ellas aún estan 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 titulo y la descripción.

Después guardas los cambios.

Si necesites mover un poco el título y la descripción, solo tienes que ir  Ir a diseño►Diseñador de plantillas►Avanzado►Agregar CSS y escribir 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 se marca para .header h1 es para el título, y el que se marca para .header .description es para la descripción, y el margen se lee así:


Ejemplo:

 Margin: 10px 0 0 40px; 

...quiere decir:  (10px)Arriba, (0)Derecha, (0)Abajo, (40px) Izquierda   

Ahora la imagen de la cabecera se ve así:

Puedes incluso, agregar algunos estilos a la imagen, por ejemplo poner borde alrededor de esta:

#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 mostrará hacia la izquierda, si quieres centrar la imagen, tienes que hacer lo mismo que el paso 1 del ejemplo 1, solo 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.

Espero que esto te sea útil =)

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

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