crosscol

tres columnas en la sección del crosscol
plantillas, trucos,


añadir tres columnas en la sección del footer,
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.
[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’/">
</b:section></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>

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>:

#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;
}

 add HTML codes here... 

 add CSS codes here...

 add Java Script codes here...

 add JQuery codes here...