Dividir el header o cabecera de un blog en dos | CuantoBlogger

Bueno, aqui veremos como se divide el header en dos en el blog de blogger, algo que muchos hacemos ya sea para poner publicidad o para poner otro gadget que necesitemos allí o simplemente porque lo queramos allí. Bueno, empezaremos de una vez. Te sugiero que no guardes hasta ver si te quedo bien.

1. Necesitamos ir a Diseño> Edición de HTML en la versión antigua, para la nueva versión vamos a Plantilla> Edición HTML, no expandimos artilugios.

2. Ya en la edición de HTML oprimes ctrl+f y buscas.

#header o #header-wrapper

3.Ya encontrado este veremos el siguiente código (los valores pueden variar dependiendo de la plantilla).

#header-wrapper {

    height: 110px; este valor puede variar

    margin: 0 auto;

    width: 980px; este valor puede variar

}

4. Lo modificamos de la siguiente forma.

#header-wrapper-left{

    float: left;

    height: 110px; este valor puede variar    margin: 0 auto;

    width: 470px; o el valor que quieras agregar}

5. Ahora debajo del código anterior ponemos el siguiente código.

 #header-wrapper-right{

    float: right;

    height: 110px; este valor puede variar    margin: 0 auto;

    width: 510px; o el valor que quieras agregar}

6. Ahora otra vez con ctrl+f busca el siguiente código.

<div id='header-wrapper'>

 Y vera un cogido parecido a este.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>

<b:widget id='Header1' locked='true' title='CuantoBlogger (cabecera)' type='Header'/>

</b:section>

<b:section class='ads-header' id='ads-header' showaddelement='no'>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

</b:section>

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

<div style='clear: both;'/>

</div>

7. En el código anterior  pon el siguiente código antes de </div> así:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>

<b:widget id='Header1' locked='true' title='CuantoBlogger (cabecera)' type='Header'/>

</b:section>

<b:section class='ads-header' id='ads-header' showaddelement='no'>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

</b:section>

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

8. Este ultimo paso es el mas importante, ver si te quedo bien, para esto da clic en Vista Previa. Si todo salio bien ya puedes guardar la plantilla he ir a ponerle un gadget.