Dividir la cabecera en las plantillas de Blogger

Hoy les vengo a mostrar un truco que es para poner un gadget al lado del logo de tu blog en las plantillas de Blogger.Este truco logra poder dividir la cabecera de tu sitio para que puedas agregar ahí lo que quieras ya sea un buscador,un html,un aviso,un baner o lo que sea.

PLANTILLAS NUEVAS

---

Ve a Diseño/Edición de HTML y busca esta línea:

/* Header

Debajo de esa misma línea está esta otra:

----------------------------------------------- */

Justo debajo de esa línea agregamos este código:

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

Eso lo podemos modificar como queramos pero claro es como se ajuste a su plantilla.

Luego buscamos este código o parecido:

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

</div>

y agregamos esto arriba del cierre </div>

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

Finalmente quedaría así:

<div'region-inner header-inner'>
<b:section'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'header2' id='header2' showaddelement='yes'/>
<div/>
</div>

Luego guarda los cambios y verás que en tu plantilla aparecerá en la cabecera así:

---

PLANTILLAS ANTIGUAS

Ve a Diseño/Edición de HTML y busca esta línea:

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

Elimínala y en su lugar coloca esto:

#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;
}

Luego busca este código o parecido:

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

</div>

y agregamos esto arriba del cierre </div>

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

Finalmente quedaría así:

<div id='header-wrapper'>
<b:section'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'header2' id='header2' showaddelement='yes'/>
<div/>
</div>

y se vería en tu plantilla así: