martes, 10 de agosto de 2010

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


Luego dejaremos el footer libre de gadgets si es que los tenemos, podemos hacer dos cosas arrastrarlos a la sidebar provisionalmente o copiar las líneas de código pertenecientes a cada gadget y pegarlas en el bloc de notas para más tarde volver a añadirlos.

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






0 comentarios:

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones