Crosscol - Dividirlo en 3 columnas

Tutoriales - El escaparate de Rosa

Antes de empezar tengo que aclarar que estás modificaciones están basadas en el código de las plantillas originales de Blogger que ya tienen incluido el crosscol en su código por defecto.

Para hacer esto mismo en una plantilla que no incluya en su diseño el código del crosscol tendríamos que saltarnos el paso [1] y [2].

<div id="main-wrapper">


y aplicar el paso [4] tal como está.

[1] Tendremos que retirar cualquier elemento que tengamos colocado en el crosscol del blog, moviendolo a la sidebar de forma temporal y, una vez añadidas las tres columnas en el crosscol, volver a colocarlo en esa sección si así lo queremos.

[2] Nos situamos en "Edición HTML" de nuestro panel y sin expandir las plantillas de artilugios, localizamos la sección del crosscol:


<div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/></div>


[3] Sustituimos ese código por este otro:

<div id='crosscol-wrapper' style='text-align:center'>

<div style='clear:both;'/>

<div id='crosscol-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='crosscol' id='crosscol-bottom' preferred='yes'>

<b:widget id='Text3' locked='false' title='' type='Text'/>

</b:section>

</div>

<div id='crosscol-columna-contenedor'>

<div id='crosscol2' style='width: 30%; float: left; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol1' preferred='yes' style='float:left;'/>

</div>

<div id='crosscol3' style='width: 40%; float: left; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol2' preferred='yes' style='float:left;'/>

</div>

<div id='crosscol4' style='width: 30%; float: right; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

Una vez guardados los cambios ya podremos volver a incluir en el crosscol los elementos que queremos mostrar en esa sección.

[4] Ahora ya solo nos queda añadirle unas líneas de CSS a la plantilla para conseguir controlar la separación de las columnas y añadirles además un color de fondo (blanco en el ejemplo) y un borde.

Pegamos estas líneas antes de

]]></b:skin></b>

CÓDIGO


#crol1{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}

#crol2{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}

#crol3{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}

#crosscol-columna-contenedor {
clear:both;
}
.crosscol-columna {
padding: 10px;
}

[5] Y tendríamos que conseguir entonces algo así:

Modificaciones

Para retirar el borde a los elementos, colocamos en border: 1px solid #60A9D1; el valor 1 en 0, o directamente borramos esa línea del código CSS.

Para cambiar el color de fondo, lo hacemos sustituyendo #fff por el código del color que vamos a usar.

El ancho de cada gadget está aplicado en porcentajes, podemos modificar la anchura de cada uno cambiando en width: el valor del porcentaje, cuidando que la suma del valor de los tres gadget juntos no sobrepase el 100%

 Fuente : El escaparate de Rosa