Cómo agregar tres columnas sobre el footer

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

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.


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!

Related Posts Plugin for WordPress, Blogger...