Hoy te voy a enseñar como agregar dos espacios en la cabecera de blogger, Por ejemplo un espacio para el Logo y el otro espacio para un gadget, anuncio, algún banner, un buscador, publicidad, etc.
Iniciemos, debemos tomar en cuenta que debemos hacer pasos diferentes si tenemos plantillas hechas con el Diseñador de plantillas de Blogger o Plantillas antiguas.
Para las plantillas hechas con el Diseñador de plantillas de Blogger:
Primero entra en TEMA.
Ahora da click a la flecha, alado de PERSONALIZAR.
Y elije Editar HTML y busca (Control + F):
/* Header
----------------------------------------------- */
Aqui te dejo un ejemplo:
Abajo de esto, pega lo siguiente:
.header {width:48%; float: left; margin:0 auto 1%;}
.header2 {width:47%; float: right; margin:0 auto 1%;}
Ahora busca el siguiente código y agrega lo que está en color rojo:
<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>
Si el codigo no aparece como arriba, solo pega lo de rojo antes del </div>
Guarda los cambios y Listo.
Ahora puedes ir a Diseño y podrás ver la cabecera dividida en dos partes.
Para las plantillas antiguas:
De igual modo entra en Diseño | Edición de HTML, busca este código:
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Elimínalo y en su lugar agrega este:
#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;
}
Ahora busca este otro código y agrega lo que está en color rojo:
<div id='header-wrapper'>
<b:section class='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 class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>
Y listo, tendrás un área para agregar un gadget junto a la cabecera.
ERROR COMUN.
Si la cabezera te da un error y aparece como en la imgen, estan de forma desigual, el uno mas arriba y el otro mas abajo.
Busca el siguiente codigo:
.header-inner
Y cambia 16px por 10px
Pero si aun no se soluciona agrega antes de ]]></b:skin> Esto:
Y PARA PONERLO EN 3 PARTES:
En lugar de pegar el primer código que se menciona pega este:
.header {width:32%; float: left; margin:0 auto 1%;}
.header2 {width:32%; float: right; margin:0 auto 1%;}
.header3 {width:32%; float: right; margin:0 auto 1%;}
Luego pega el otro código que se menciona. Después pega antes del <div style='clear: both;'/> que agregaste previamente lo siguiente:
<b:section class='header3' id='header3' showaddelement='yes'/>
