Dividir la cabecera en dos

jueves, 6 de octubre de 2011.
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.

Comentários:

Publicar un comentario

 
El Desvan de Ninfa © Copyright 2010 | Design By El Desvan de Ninfa |