Tutorial. Blogger. Cómo dividir la cabecera del blog en dos.

Últimamente se van viendo blogs que tienen por ejemplo, una cabecera en un lado y la lista de seguidores en el otro.

Jeje, este mismo tiene esa cualidad.

Me explico, antes tenían una cabecera que ocupaba todo el ancho de la columna y ahora tienen la cabecera en la mitad y en la otra, la lista de seguidores. (Podéis poner otra cosa, el caso es que se puede incrustar otro gadget)

Para conseguirlo:

Reducir la imagen de la cabecera que tenías antes a la mitad o crear una que sea de la mitad de medida del ancho de la columna.

Suelen ser de unos 900 de ancho, pues de 450, aprox. Eso es ir probando.

Ahora vamos a lo técnico para hacer que puedas poner dos gadgets en esa columna.

Cuando entremos en edición html, si estamos con Chrome, damos a Control+F y se nos pondrá a la derecha una ventanita, ahí escribimso /*Header    y entonces veremos que a la izquierda, nos sale esa palabra iluminada en naranja.

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: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 no te sale muy a la par o descentrado debes mirar esto:


Para que salgan igualados.

.header-inner {
  padding: 27px 0 3px;
}                                    (si cambiásemos el 27, variaríamos la altura de la cabecera)

.header-inner .section {
  margin: 10 35px;
}

(variando lo de margin, se cambia la altura del gadget que tengamos en la derecha)

Como ya digo, es jugar con los numeritos y probar, probar.

IMPORTANTE: SIEMPRE GUARDAR UNA COPIA DE VUESTRA PLANTILLA ANTES DE HACER ALGÚN CAMBIO.
O, cuando estéis editando vuestro html, dad a vista previa antes de guardar el trabajo, si no sale lo que os gusta, no guardéis nunca.