Divisi??n de columnas en tu blog

Aqu?? lo que explicaremos ser?? la divisi??n de columnas para que quede todo m??s ordenado.

Para empezar lo que haremos ser?? a??adir las siguientes l??neas de c??digo justo antes de]]></b:skin>

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

Las l??neas de c??digo empiezan todas con b:widget m??s o menos as??:

<b:widget id=’BlogArchive1′ locked=’false’ title=’Archivo del blog’ type=’BlogArchive’/>

Una vez dejamos el footer libre buscamos al final de la plantilla lo siguiente:

<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’ showaddelement=’yes’/>
</div>

De no tener la opci??n de a??adir gadgets ser??a algo as??:

<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>

En ambos casos lo que haremos ser?? sustituir la l??nea en negrita por lo siguiente:

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

<div id='footer-izquierdo' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer-centro' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer-derecho' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

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

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

<b:section class='footer' id='col-bottom' preferred='yes'/>

</div>

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

</div>

Miramos en vista previa para ver si es posible guardar los cambios y si es as?? guardamos.
En plantilla de dise??o lo veremos de esta forma.

Ahora vamos a personalizar ese nuevo espacio.
Vamos otra vez justo antes de ]]></b:skin> y a??adimos lo siguiente:

#col1{
background:#000;
margin: 5px;
padding: 5px;
border: 1px solid #fff;
}
#col1 h2{
background:#000;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#fff;
}
#col2{
background:#000;
margin: 5px;
padding: 5px;
border: 1px solid #fff;
}
#col2 h2{
background:#000;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#fff;
}
#col3{
background:#000;
margin: 5px;
padding: 5px;
border: 1px solid #fff;
}
#col3 h2{
background:#000;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#fff;
}

Nos familiarizamos con los estilos intentando conocer a qu?? parte corresponde cada uno para poder personalizarlos.

Contenido
footer izquierdo col1
footer centro col2
footer derecho col3

T??tulos
footer izquierdo col1 h2
footer centro col2 h2
footer derecho col3 h2

Con background estamos a??adiendo color de fondo, en border a??adimos estilos al borde y utilizamos color para el color del texto.

Guardamos los cambios y en plantilla de dise??o a??adimos esos gadgets que tenemos en espera o los que pensamos a??adir.El resultado ser??a algo as??.

Un poco triste y aburrido ??verdad? vamos a darle un poco de vidilla pero primero le daremos color a ese fondo, buscamos las primeras l??neas que a??adimos y le damos color.

#footer-columna-contenedor {
background:#000;
clear:both;
}

Podemos eliminar el color de fondo y borde de los gadgets y a??adir una imagen en su lugar.

#footer-columna-contenedor {
background-image:url(‘url-de-tu-imagen’);
clear:both;
}

Se puede seguir jugando…