Dividir la cabecera del blog

No es difícil y quedará muy bien para colocar además del título o nuestro logo, cualquier otro elemento a la derecha de estos.

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Antes de empezar sabed que estos cambios están hechos para la plantilla Mínima de Blogger, lo que no quiere decir que no pueda hacerse en las demás, supongo que será cosa de probar...

Si usáis un blog de pruebas mejor, ya que evitaréis futuros disgustos en el caso de que algo salga mal.

He usado para este ejemplo las medidas de cabecera que vienen incluidas en la Mínima sin modificar, cada uno luego usará sus propias medidas, teniendo en cuenta que la medida de los dos widget no debe sobrepasar la medida total de la cabecera.

En el ejemplo, los dos widget son de la misma medida, es decir, he "partido" la cabecera en dos justo por la mitad, pero pueden variarse las medidas para que el widget que nos interese sea mayor que el otro.


[1] Nos situamos en la parte del código CSS de nuestra plantilla y localizamos el código correspondiente a nuestra cabecera (header):

#header {
margin: 10px;
text-align: center;
color:#fff;
}

Lo cambiaremos por este otro:

#header {
width: 310px;
float: left;
margin:0 auto 10px;
text-align: center;
color:#000;
}
#header-derecha {
width: 310px;
float: right;
color: #000;
margin:0 auto 10px;
}

[2] Un poco más arriba de esto, veremos el #header-wrapper {, si tenemos añadido borde en esta sección, hemos de poner su valor en cero:

border:0px solid $bordercolor; o eliminar esa línea completa directamente.

Fijaros también ahí, en las propiedades de margin: y poned los mismos valores en el primer código que hemos añadido para cada sección, o sea, en #header{ y #header-derecha.


[3] Bajamos ahora por la plantilla hasta localizar este código:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Ejemplo de cabecera (cabecera)' type='Header'/>
</b:section>
</div>

Lo sustituimos por este otro:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Ejemplo de cabecera (cabecera)' type='Header'/>
</b:section>
<b:section class='header' id='header-derecha' showaddelement='yes'/>
</div>

Así se verá en la página de añadir elementos:



El nuevo elemento de la derecha puede usarse como hacemos con cualquier otro widget, por ejemplo para añadir un buscador:



En cuanto al elemento de la izquierda, seguirá siendo nuestro "header" de siempre, al que podemos añadir un logo o imagen si nos apetece:




Tened en cuenta que en las nuevas plantillas el código ha cambiado de tal manera que $startSide será lo mismo que left y $endSide será lo mismo que right.


Visto en: BlogU