Dividir la cabecera del blog

  • septiembre 4, 2010







Dividir la cabecera del blog sirve para poder poner al lado del t??tulo del blog alg??n gadget como un anuncio, alg??n banner, un buscador, etc.
El proceso que veremos es para las plantillas basadas en la plantilla M??nima y para las que son del Dise??ador de plantillas de Blogger.

Para las plantillas hechas con el Dise??ador de plantillas de Blogger:


Primero entra en Dise??o | Edici??n de HTML y SIN expandir los artilugios busca esta parte:

/* Header
———————————————– */

Debajo de ella pega lo siguiente:

.header {width:48%; float: left; margin:0 auto 1%;}
.header2 {width:48%; 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>


Guarda los cambios y listo. Ahora puedes ir a Dise??o | Elementos de la p??gina y ya podr??s ver la cabecera dividida en dos partes.

Cabecera doble

Para las plantillas antiguas:
De igual modo entra en Dise??o | Edici??n de HTML y SIN expandir los artilugios 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.

Importantes en trucos para blogs

No Comments Found