Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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


Alquimista dice...

Muchas gracias pero no me funciona me aparece este mensaje

"No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>"."

Sabes como puedo solucionarlo

Jaime Trujillo Escobedo dice...

Hola Alquimista dijo..., voy a comprobar el código hoy e intentar arreglarlo ;-) Saludos!! :-)

Abel3D dice...

Hola Jaime, una pregunta sobre este truco, se pueden incluir gadget en cada columna de las 3 que se pueden poner en este truco?? o sea, si quiero poner en las columnas categorias extras o los iconos que te mencionaba al principio por medio de gadgets, dado que como tengo ahora en mi plantilla ni siquiera tengo opcion de adicionar gadgets en la parte del pie de pagina como si se puede en los sidebar, saludos.

Abel3D dice...

Ok, ya vi al final de este articulo que si se puede poner gadgets, voy a probar porque esto lo necesitaba, saludos y luego te cuento.

Jaime Trujillo Escobedo dice...

Hola Abel3D! :-D pués ya me contarás, de todas formas, en algún post explicaré también cómo poder añadir gadgets encima de la cabecera, encima del footer y encima del bloque de entradas :-D

Jaime Trujillo Escobedo dice...

Alquimista, problemilla solucionado! ya funcionan las columnas :-D

Abel3D dice...

Jaime, eso seria mas interesante lo que comentas, dejar el pie de pagina abajo y encima como lo haz comentado poner asi mismo "3 columnas" de gadgets como la imagen de referencia que te envie a tu mail de arriba no se si la viste, de forma que queden las 3 columnas de gadget entre el pie de pagina y la informacion superior, esperare a que publiques esto, saludos.

Jaime Trujillo Escobedo dice...

Pués la verdad es que sí puede ser interesante :-D este truquillo está bastante bien aunque si prefieres simplemente poder añadir cosas encima o debajo del footer (como en la imagen pero sin las tres columnas) la verdad es que puede ser más fácil y cómodo :-D preparo la entrada y la publico! :-)

Arturuto dice...

Por favor, corrige el siguiente error y envía la plantilla de nuevo.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "body" must be terminated by the matching end-tag "".

Busco pero veo que todo va bien. Decidme colega donde esta la solucion. es al respecto de este truco de esta trada que as puesto.

Arturuto dice...

Umm bueno ya encontre el problema, era la ultima parte del cogido que se repetia ya q al final de la paltilla viene la ultima misma linea de codigo que la que pusiste en el truco.

Jaime Trujillo Escobedo dice...

Así es, Arturuto, se trataba de un cierre "extra" en el código: </div>. Gracias por el aviso, ya está solucionado en la entrada.

Knight-Dark Moon dice...

Mi blog y sus autores te agradecemos por tu brillante trabajo... ;)

Jaime Trujillo Escobedo dice...

Knight-Dark Moon, yo os agradezco vuestra amabilidad y comentarios ^^.

TheLukasWeb dice...

En la plantilla de mi blog: TheLukasWeb no tengo footer y querria ponerselo y aplicar este truco, como lo hago?
gracias

Jaime Trujillo Escobedo dice...

TheLukasWeb, prueba a incluir este otro truco antes de habilitar las tres columnas en el footer de tu blog.

Alex494 dice...

Hola de nuevo Jaime, estoi intentando poner estas tres columnas pero a la hora de copiar el codigo delante de ]]> , no se como hacerlo xq ya puse otro codigo delante al realizar otra modificacion. ¿lo pongos sin mas o hay que hacer algo?

Gracias

Jaime Trujillo Escobedo dice...

Alex, tan solo debes pulsar la tecla enter justo antes de la etiqueta para que ésta descienda y poder incluir el código encima. Puedes colocar un número ilimitado de bloques CSS antes de esta etiqueta, no importa que ya lo hayas hecho anteriormente.

¡Saludos!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo