lunes, 9 de mayo de 2011

Dividir el crosscol del blog

El crosscol es esa área debajo de la cabecera en la que la mayoría de las veces añadimos un menú horizontal, aunque muchas otras veces queremos que nos rinda más ese espacio para añadir más gadgets y la mejor forma de hacerlo es dividir el crosscol del blog para que pueden entrar más gadgets en una fila, es decir, que si originalmente se ve así:


Con las respectivas divisiones pueda verse así:


Empecemos, lo primero es entrar en Diseño | Elementos de la página y cerciorarse que no haya ningún gadget en esa área, si tienes alguno lo mejor es moverlo a la sidebar u otro lugar momentáneamente, ya después podrás ponerlo de nuevo ahí, sólo tienes que arrastrarlo y soltarlo en el lugar donde lo quieras mover.

Ya que está libre esa área entonces vamos a Diseño | Edición de HTML y SIN expandir los artilugios busca este código:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

O si usas una plantilla del Diseñador de Plantillas de Blogger entonces busca este código:
<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes' />
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

Cualquiera de esos códigos que tengas elimínalo y en su lugar pon este:
<div class='region-inner tabs-inner' id='crosscol-wrapper' style='text-align:center'>

<div id='crosscol0' style='text-align: center; padding: 5px;'>
<b:section class='tabs' id='crosscol-superior' preferred='yes'/>
</div>

<div id='crosscol1' style='width: 33%; float: left; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross1' preferred='yes' style='float:left;'/>
</div>

<div id='crosscol2' style='width: 33%; float: left; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross2' preferred='yes' style='float:left;'/>
</div>

<div id='crosscol3' style='width: 33%; float: right; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>
Guarda los cambios y listo, puedes ingresar a Elementos de la Página y ya podrás ver tu crosscol dividido en tres partes.
Si quisieras que sólo estuviera dividido en dos y no en tres partes entonces elimina el código en color gris, y cambia los 33% que están a los lados por 49%
Fácil y rápido ¿no?

No hay comentarios:

Publicar un comentario