29 abril 2012

Cómo lograr que la imagen de la cabecera cubra el ancho del blog completo

¿Tienes pensando usar una imagen en la cabecera que cubra el ancho del blog completo? Ésto es algo que me han comentado desde Twitter y en el blog, así que hoy he preparado un tutorial que te ayudará a conseguirlo.

El cómo luce la imagen de la cabecera después de los cambios, lo puedes ver en la siguiente imagen, considerando que la imagen de la cabecera se agregó desde la sección de "Diseño".

diferencia de la cabecera cuando cubre el ancho del blog y cuando no

Si observas el ejemplo, verás que la imagen de la cabecera abarca el ancho del blog por completo, sin que haya una separación o margen a los lados o arriba.

Ésto lo podemos conseguir sin tener que ingresar a la edición  HTML de la plantilla, y funcionará en todos los navegadores incluyendo Internet Explorer 7.

No sé si estarás de acuerdo conmigo pero pienso que ésto le da un look más moderno al blog.

Para la demostración, voy a usar la plantilla "Simple de Blogger", ya que por el tipo de diseño, ésto será notorio y además se verá más estético.

¿Es eso lo que siempre has querido hacer, o quieres hacerlo en tu blog? Entonces, veamos cómo lograrlo...

¡Ahh!, pero ¿quieres ver el resultado en un blog? No hay problema, lo puedes ver en este blog.

Cómo lograrlo paso a paso

  1. Primero, tienes que tener lista la imagen que vas a colocar en la cabecera, y ésta debe tener el mismo ancho que tiene el blog completo.

    Para saber el ancho del blog completo y poder crear tu imagen, solo tienes que ir a: Plantilla > Personalizar  > Ajustar ancho, y tomar nota del ancho en pixeles donde dice "Blog completo".

    Como puedes apreciar en la siguiente imagen, éste tiene un ancho de 900 pixeles.

    Configuracion-ancho-del-blog
  2. Teniendo lista la imagen, vas a Diseño, y desde la sección de la cabecera, subes la imagen. Para ello solo abre las opciones de configuración, haciendo click en "Editar" de dicha sección.

    No Marques la opción de "Reducir hasta ajustar", y selecciona la ubicación que quieras.

    Configuracion de la cabecera del blog
  3. Luego vas a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el recuadro para añadir CSS, agregas esto:
    #header-inner{
    margin:-10px 0 0 -10px;
    }

    El valor del margen (margin) se lee así de izquierda a derecha: -10px margen arriba, 0px a la derecha, 0px abajo, -10px a la izquierda.
  4. Ahí mismo verás los resultados; ¡ahora la imagen de la cabecera ocupa el ancho del blog! Solo falta que guardes los cambios en "Aplicar al blog".

 ¡Listo!, con unos simples pasos, la imagen de la cabecera ocupa el ancho del contenido de tu blog ;)


NOTA IMPORTANTE

Gracias al comentario de +Iliana Uriostegui, he comprobado que Blogger ha agregado una nueva regla de CSS que afecta el resultado en algunas plantillas, y no es posible que la imagen cubra todo el ancho.

Si a pesar de seguir todos los pasos, no logras el resultado, vas a necesitar usar esta regla:

.header-inner .Header #header-inner {
overflow:visible;
}


La regla anterior hace que la imagen se muestre completa y con las instrucciones descritas en los pasos, consigamos el resultado que buscamos.

Ésto lo agregas yendo a Plantilla > Personalizar > Avanzado > Añadir CSS. Y guardas los cambios en "Aplicar al blog".


¿Buscas inspiración para crear tu cabecera?
Si es así, entonces échale un vistazo a esta entrada:
Empezar a crear tu propia cabecera + 10 Ejemplos de Cabeceras Ilustradas

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.