Añadir tres columnas en la sección del crosscol

05 septiembre 2009

Añadir tres columnas en la sección del crosscol

    No hay comentarios

Después de haber publicado la manera de añadir tres columnas en la sección del footer, algunas personas me han estado consultando para conseguir la posibilidad de añadir mas gadget en distintas partes de sus plantillas, una de las zonas más demandadas para aprovecharla al máximo es, sin duda, el crosscol.



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].
Colocar el código del paso [3] justo antes de <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>


Ejemplo diseño


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

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



Ejemplo blog


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%

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


No hay comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )