Cómo dividir la cabecera de blogger en 2 o 3 secciones

En ocasiones necesitaremos tener dos o tres partes en nuestra cabecera, ya sea para poner en una el título de nuestro blog y en otra una publicidad, o las categorías, o simplemente cualquier otra funcionalidad que deseemos.

Para hacerlo sólo basta con agregar un pedazo de código a nuestra plantilla de blogger y listo, problema resuelto.

Buscamos la sección de estilos siguiente:

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

Y debajo de ella pondremos alguno de los siguientes códigos:

Para dividir en dos partes la cabecera del blog en blogger:

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

Para dividir la cabecera del blog en tres partes:

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

Ahora busca el principio del siguiente código y pega en donde dice "AQUÍ PONEMOS ALGUNO DE LOS SIGUIENTES CÓDIGOS" alguno de los códigos de más abajo de forma que quede así como se ve a continuación:

<div class='region-inner header-inner'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>

<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>

</b:section>

AQUÍ PONEMOS ALGUNO DE LOS SIGUIENTES CÓDIGOS

</div>

Para dividirlo solo en 2 partes, ponemos éste:

<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>

Para dividirlo en 3 partes, ponemos el siguiente:

<b:section class='header2' id='header2' showaddelement='yes'/>


<b:section class='header3' id='header3' showaddelement='yes'/>
<div style='clear: both;'/>

Ya con eso tendríamos lo necesario para ver dos y tres lugares en nuestra plantilla de diseño y poder agregar varios gadgets más.


Respuesta a la bloggera que pregunta:

Problema en el diseñador de blogger para mover los elementos cuando quedan descuadrados, ocultos o desalineados.

Buscas este código:

]]>
</b:template-skin>

Puedes buscar solamente (</b:template-skin>) sin los paréntesis, lo importante es que arriba de estos corchetes ]]> pegues el siguiente código:

#layout .header-inner .section#header2 {
    width: 37%;
    float: right;
}

Puedes modificar el valor del 37% hacía un menor o mayor número hasta que te quede encajado correctamente el rectángulo del header2... por lo general, entre más pequeño sea ese porcentaje mucho mejor. Juega a tu gusto con ese valor, haz pruebas y me comentas...