Este es un espacio que queda desperdiciado cuando nuestro logo es pequeño o no usa el total de la cabecera. Luego de este tutorial ustedes dispondrán de ese "hueco" para poner un menú, una imagen, botones de redes sociales, un simple texto, un bloque de anuncios o lo que ustedes deseen.
Para logra esto debemos seguir apenas un par de pasos que os dejare a continuación.
Vamos a Diseño | Edición de HTML y buscamos <header>. Debemos borrar desde <header> hasta </header>, el cual se encuentra unas lineas mas abajo.
En su lugar pegamos el siguiente código:
<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left' style='float:left; width: 45%;'>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='La Pen-Drive de Tony (Cabecera)' type='Header'></b:widget>
</b:section>
</div>
</div>
<div class='fauxborder-right header-fauxborder-right' style='float:right; width: 53%;'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML188' locked='false' title='' type='HTML'></b:widget>
</b:section>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
<div style='clear: both'/>
<div class='cosaspablogger' style='width: 98%; margin: 10px 3px;'>
<b:section class='banner2' id='banner2' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML189' locked='false' title='' type='HTML'></b:widget>
</b:section>
</div>
<div style='clear: both'/>
Nota: No se preocupen por el nombre de la cabecera, este se cambiara solo.
Ahora agregaremos el estilo.
Para ello buscaremos lo siguiente: ]]></b:skin> y justo ANTES pegaremos este codigo:
/* css Header dividido */
.header-inner{
float: left; width: 50%;
margin: 6px;
}
.header-fauxborder-right{
float: right;
width: 46%; height: auto;
margin: 6px 6px;
}
.cosaspablogger{
margin: 10px 3px 5px 3px;
}
/* FIN css Header dividido */
Guardamos y vamos a Diseño en nuestro escritorio blogger y comprobamos que en lugar del header que ocupaba todo el ancho de la plantilla hay un espacio para agregar otro gadget.
Para ajustar el ancho de el header y del otro widget debemos tener en cuenta lo siguiente:
<div class='fauxborder-left header-fauxborder-left' style='float:left; width: 45%;'>
<div class='fauxborder-right header-fauxborder-right' style='float:right; width: 53%;'>
Los valores en Amarillo corresponden al ancho de los espacios que generamos. Tengan en cuenta mantenerlos en menos de 97% o 98% en la suma total para no superponerlos.
Fuente | Blog de Cosas Pa´ Blogger