Tres columnas en el footer (pie de página)
Si quieres tener un espacio más abierto, más personal, tres columnas en las que puedes poner directorios, direcciones o las típicas cosas que no te gustan poner en la sidebar, puedes seguir estos simples pasos y aplicar al pie de tu blog tres lindas columnas...
*Debes asegurarte de que no tienes ningún gadget (elemento de página) en el footer del blog, si tienes alguno muévelo a la sidebar. Después podrás volverlo a colocar.
Busca este pequeño bloque:
¿Ves la línea que está en rojo? solo tienes que borrarla y pegar esto en su lugar:
Busca la etiqueta ]]></b:skin> y encima le pegaremos:
En el código hay una línea que separa las tres columnas del footer, es una línea negra, y la línea de código que la representa es esta: <hr align='center' color='#000000' width='90%'/> si quieres que no aparezca la línea separatoria, borra la línea de código y listo. Si por el contrario quieres cambiar el color, puedes hacerlo en color='#000000'.
Guardamos plantilla.
¡En Diseño verás que hay tres columnas en las que puedes añadir más gadgets!
Nota:
El truco no se ve en vista previa, pero puedes hacer vista previa para comprobar que tu blog carga de manera correcta.
Y así quedaría (mira las tres columnas en el pié del blog)...
*Debes asegurarte de que no tienes ningún gadget (elemento de página) en el footer del blog, si tienes alguno muévelo a la sidebar. Después podrás volverlo a colocar.
Diseño>edición HTML>sin expandir artilugios
Busca este pequeño bloque:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
¿Ves la línea que está en rojo? solo tienes que borrarla y pegar esto en su lugar:
<div id='footer-columna-contenedor'>
<div id='footer2' 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='footer3' 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='footer4' 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;'/>
<p>
<hr align='center' color='#000000' width='90%'/>
</p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'/>
<div style='clear:both;'/></div>
</div>
</div></div>
Busca la etiqueta ]]></b:skin> y encima le pegaremos:
#footer-columna-contenedor {
clear:both;
}
.footer-columna{
padding:10px;
}
En el código hay una línea que separa las tres columnas del footer, es una línea negra, y la línea de código que la representa es esta: <hr align='center' color='#000000' width='90%'/> si quieres que no aparezca la línea separatoria, borra la línea de código y listo. Si por el contrario quieres cambiar el color, puedes hacerlo en color='#000000'.
Guardamos plantilla.
¡En Diseño verás que hay tres columnas en las que puedes añadir más gadgets!
Nota:
El truco no se ve en vista previa, pero puedes hacer vista previa para comprobar que tu blog carga de manera correcta.
Y así quedaría (mira las tres columnas en el pié del blog)...
0 comentarios:
Publicar un comentario
¡Gracias por comentar!