CABECERA

PONER EL TITULO DE CABECERA EN EL CENTRO

.header .widget {
 text-align:center;}
.header img {margin:0 auto;}

Dividir la cabecera del blog

http://ciudadblogger.com/2010/08/dividir-la-cabecera-del-blog.html

Dividir la cabecera del blog sirve para poder poner al lado del título del blog algún gadget como un anuncio, algún banner, un buscador, etc.

El proceso que veremos es para las plantillas basadas en la plantilla Mínima y para las que son del Diseñador de plantillas de Blogger.

Para las plantillas hechas con el Diseñador de plantillas de Blogger:

Primero entra en Diseño | Edición de HTML y SIN expandir los artilugios busca esta parte:

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

Debajo de ella pega lo siguiente:

.header {width:48%; float: left; margin:0 auto 1%;}
.header2 {width:47%; float: right; margin:0 auto 1%;}

Ahora busca el siguiente código y agrega lo que está en color rojo:

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Guarda los cambios y listo. Ahora puedes ir a Diseño | Elementos de la página y ya podrás ver la cabecera dividida en dos partes.

Para las plantillas antiguas:

De igual modo entra en Diseño | Edición de HTML y SIN expandir los artilugios busca este código:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Elimínalo y en su lugar agrega este:

#header {
width: 48%;
float: left;
margin:0 auto 1%;
text-align: center;
color: #000;
}

#header2 {
width: 48%;
float: right;
margin:0 auto 1%;
text-align: center;
color: #000;
}

Ahora busca este otro código y agrega lo que está en color rojo:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Y listo, tendrás un área para agregar un gadget junto a la cabecera.

Centrar imagen de la cabecera de Blogger

Cuando subimos una imagen a la cabecera de nuestro blog se puede presentar uno de estos casos: 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. 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. 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.