5.8.10

Centrar imagen de la cabecera de Blogger




Cuando subimos una imagen a la cabecera de nuestro blog se puede presentar uno de estos casos:

  1. Que la imagen sea más ancha que la cabecera: En esta caso la imagen se saldrá de la cabecera, y por tanto se debe descartar.

  2. Que la imagen tenga el mismo ancho de la cabecera: En este caso la imagen encajará perfectamente, y es una imagen que se puede aceptar ya que no afectará la simetría del blog. Es la opción ideal.

  3. Que la imagen sea menos ancha que la cabecera del blog: En esta caso la imagen nos aparecerá, por defecto, en el lado izquierdo. Si queremos que, para un mejor diseño, la imagen aparezca en el centro de la cabecera, debemos efectuar las siguientes modificaciones en nuestra plantilla (tomando como ejemplo un blog diseñado con el Nuevo Diseñador de Plantillas, y la plantilla Picture Window):

Vamos a Editar HTML:

Diseño Editar HTML Click dentro del editor Ctrl+f

Ponemos dentro del rectángulo de búsqueda (search) esto:

/* Header

para localizar el encabezado de la sección CSS de la cabecera, que es éste:

/* Header
----------------------------------------------- */

...e inmediatamente debajo pegamos este código:

.header .widget {
margin-top: 4px;
margin-bottom: 4px;
width: 663px;
padding: 0 95px;
}
  • margin-top: 4px; corresponde a la distancia de la imagen al borde superior de la cabecera.
  • margin-bottom: 4px; corresponde a la distancia de la imagen al borde inferior de la cabecera.
  • width: 663px; corresponde a una imagen con 663 pixeles de ancho.
  • padding: 0 95px; corresponde a la distancia entre la imagen y los bordes laterales de la cabecera.

En el ejemplo de este tutorial, la imagen está centrada así: al ancho de la imagen corresponde un padding de 0 95px, con esta plantilla.

Dependiendo del ancho de la imagen (width) podemos centrarla aumentando o disminuyendo la distancia en pixeles (0 95px) entre la imagen y los bordes laterales (padding) de la cabecera, observando la ubicación de la imagen en la Vista previa, antes de guardar plantilla.

Para seguir conservando la simetría en la apariencia de nuestro blog, centramos, dentro de la imagen, el título del blog, así:

Siguiendo hacia abajo en la sección CSS de la cabecera (header), localizamos este código:

.Header h1 {
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

...y le agregamos esta línea:

  text-align:center;

Debiendo quedarnos así:

.Header h1 {
  text-align:center;
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

Observamos Vista previa y guardamos plantilla.

Así se verá el blog:

Blog Picture Window con imagen de cabecera centrada




Índice Edición HTML
Poner imagen de fondo a un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cabecera

72 comentarios :

▼▲ Mostrar / Ocultar comentarios

Publicar un comentario en la entrada