Dividir la cabecera del blog en dos


Este código, dividir la cabecera en dos puede resultar bastante útil para los que quieran al lado del título (cabecera) colocar un banner, un buscador o un gadget para lo que sea
Este truco es valido únicamente para las plantillas básicas que ofrece Blogger.com.

  1. Nos dirijimos a Diseño > Edición de HTML y sin expandir los artilugios busca este código:
/* Header
----------------------------------------------- */
Debajo de ese código pega lo siguiente:
.header {width:48%; float: left; margin:0 auto 1%;}
.header2 {width:48%; float: right; margin:0 auto 1%;}
Ahora buscamos el siguiente código y agregamos lo que está en color azul:
<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>

  • Y por último le damos clic a VISTA PREVIA y si nos gusta como queda, clic en GUARDAR PLANTILLA.
Para las plantillas antiguas:
  1. Nos dirijimos a 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;
}
Reemplazalo por el siguiente código:
#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 el siguiente código y agrega lo que está en color azul:
<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 por último le damos clic a VISTA PREVIA y si nos gusta como queda, clic en GUARDAR PLANTILLA.

2 comentarios:

  1. muchas grasias amigo! seguire tus pasos estan bien esplicados :)

    ResponderEliminar
  2. No hay de que! Siempre encantado en enseñar lo que aprendí :)

    ResponderEliminar