Dividir la cabecera del blog en las plantillas de Diseño

Habíamos visto hace algún tiempo como dividir el header (cabecera) del blog para las plantillas anteriores a las del Nuevo Diseñador de Blogger.

En esta entrada veremos como hacer lo mismo para las plantillas del Nuevo Diseñador, lo que nos permitirá conservar el header del blog y al mismo tiempo, disponer de un espacio para añadir un gadget a su izquierda, que servirá para incluir un buscador, un banner de publicidad, enlaces a redes sociales, etc.

[1] Colocamos unas líneas en el CSS de la plantilla, siempre antes de ]]></b:skin>, y en este caso estaría bien localizar esto:

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

Y justo debajo colocar el CSS necesario:

.header {width:50%;
float: left;
margin:0 auto 2% ;
}
.header2 {width:50%;
float: right;
margin:0 auto 2%;
}

[2] Vamos entonces bastante más abajo en el código de la plantilla y localizamos esta parte del código:

<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>
</div>

Añadimos ahí lo que muestro destacado en negrita:

<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>

[3] Guardamos cambios y comprobamos la vista en Diseño, donde ya deberíamos ver la cabecera dividida en dos partes:

[4] Una vez añadimos un nuevo gadget al lado del header, veremos algo como esto en la vista del blog:

[5] Como vemos en esta imagen de ejemplo, el título del blog al tener un tamaño de texto muy grande, se ve en dos líneas. Corregimos esto desde el Diseñador de Blogger, donde pinchando en "Avanzado" - "Titulo del blog" podemos ajustar el tamaño del título:

El resultado sería entonces algo así:

Esto sucede porque lo que pretendemos es que los dos gadget, cabecera y el nuevo añadido, sean iguales en sus proporciones.
También podríamos necesitar que uno de los dos tuviese mayor tamaño que el otro, según lo que vamos a colocar ahí, si por ejemplo el gadget header va a ser mayor que el gadget header2, quizá no necesitemos reducir el tamaño del texto desde el Diseñador.

En caso de querer modificar las medidas de cualquiera de los dos gadget, lo haríamos en el CSS añadido en el paso [1] cambiando el valor de width:50%; y teniendo en cuenta las proporciones, es decir, si al header le damos un width mayor, reducimos en header2 el mismo porcentaje que hemos añadido en header o viceversa.