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.

Decorar el footer (pie del blog)

Algo muy común en los blogs es el footer o pie del blog. En este apartado solemos encontrar los créditos, la política de privacidad [+], el nombre del autor, la fecha de creación...

En la mayoría de los casos, nos encontramos con un footer sin decoración alguna o como mucho, con un simple borde.

Con esta entrada podrás personalizar el pie de tu blog y agregarle propiedades a tu gusto para conseguir un aspecto que conjunte a la perfección con tu sitio web.

La estructura de un blog es esta:



Diseño>Edición de HTML>expandimos artilugios




En las plantillas de blogger, los estilos del footer son similares a esto:

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

En la línea width:660px; podemos comprobar que el valor 660px se repite en el bloque de outer-wrapper:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Ahora vamos a insertar dos líneas al primer bloque: el atributo necesario para poner el fondo y el atributo para configurar un borde:

#footer {
background: #cccccc;
border: 2px solid #ff0000;
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

background: #cccccc; Indica el color de fondo (en este caso blanco [+]).

border: 2px solid #ff0000; Son las propiedades del borde. El grosor es de 2px pero puedes aumentar o disminuir la cifra para cambiarlo. Su estilo es solid (normal) y el color es #ff0000 (rojo [+]).

Para poner un fondo de imagen, sustituye la línea background: #cccccc; por background: transparent url(URL DE TU IMAGEN) repeat scroll 0 0; e incluye la dirección de la imagen de fondo entre los paréntesis (donde dice URL DE TU IMAGEN).



Según el tamaño de la imagen, será necesario editar la altura del footer, por tanto vamos a insertar la línea height:100px; debajo de #footer {.


El valor 100px puede aumentarse o disminuirse para obtener la altura deseada.

Una vez hechos algunos cambios, procederemos a habilitar la zona del footer para poder añadir gadgets desde el apartado de Elementos de página:




Busca este bloque (estará al final de la plantilla):

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

Y cámbialo por esto:

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

Ahora podemos agregar fácilmente los créditos en el pie del blog.

Busca la etiqueta ]]></b:skin> y encima añade este bloque de CSS:

.creditos{
color: #000000;
font-size: 12px
float: center;
line-height: 2em;
padding-top: 70px;
font-family: Arial, Sans-Serif;
font-weight: normal;
}
Por último guarda la plantilla:



Ahora, en Elementos de página, añade esto en un gadget html-javascript:

<div class="creditos">
<p>CONTENIDO</p>
</div>

Sustituye CONTENIDO por la frase a mostrar.

Guarda el gadget y listo.

flores rojas dice...

Que tengas unas Felices Fiestas y disfrutes con los tuyos.
Saludos.

Laube dice...

Qué guay!!!!!!!! Me encanta!!!!!!!! Es verdad que descuidamos bastante los footers... Gracias Jaime!. Me guardo en favoritos esta entrada a ver cuándo me pongo con ella.
Un besote y felices fiestas. Disfrútalas mucho!!!!!!!!!!!!!

bernardo28 dice...

hola bueno es la primera vez
y se ve interesante
tienes otro seguidor en tu blog
bye
aunque no me conoces pero tu blog esta
!!chido ,nice,, cool!!

Jaime Trujillo Escobedo dice...

¡Muchas gracias flores rojas! espero que tu también disfrutes de unas bellísimas fiestas navideñas.

Jaime Trujillo Escobedo dice...

¿Verdad Laube?

Y eso que el footer es algo bastante útil ;).

Si necesitas cualquier cosa o quieres personalizarlo un poco más "a tu gusto" dímelo.

¡Abrazos y Felices fiestas!

Jaime Trujillo Escobedo dice...

¡Bienvenido bernardo28!

Estoy encantado de tenerte en El Balcón.

Muchas gracias por unirte a los seguidores ;).

Ana Laura dice...

Me ha salido bien, aunque no logré que mi footer fuera de punta a punta de la pantalla, y queda pequeño en medio, de cualquier manera, me ha gustado bastante como quedó (si tienes idea de como puedo hacer para que vaya de márgen a márgen, como el tuyo, dímelo por favor). Sin embargo, se ve diferente en IE que en Firefox, aunque eso me pasa con varios detallecitos y supongo que no tiene solución.
Muchas gracias, Jaime, como siempre muy claro!!

Jaime Trujillo Escobedo dice...

Me alegro mucho Ana Laura. Verás, el problema del footer puedes solucionarlo buscando este bloque:

#footer {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://www.fileden.com/files/2007/12/14/1644037/cinta%20marron.jpg) no-repeat scroll right bottom;
clear:both;
letter-spacing:0.1em;
line-height:1.6em;
margin:0 auto;
padding-top:6px;
text-align:center;
}

Y cambiándolo por este otro:

#footer {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://www.fileden.com/files/2007/12/14/1644037/cinta%20marron.jpg) repeat-x scroll right bottom;
clear:both;
letter-spacing:0.1em;
line-height:1.6em;
margin-left:-208px;
padding-top:6px;
text-align:center;
width:1268px;
}

En Firefox se visualiza correctamente.

A mi también me suele suceder el hecho de que algunas partes del blog se visualizan de forma distinta según el navegador. Internet Explorer suele cambiar los márgenes y algunos estilos (como los colores) pero en ocasiones puede solucionarse.

Si necesitas algo más házmelo saber.

Ana Laura dice...

Perfecto, le tuve que hacer alguna modificación, porque además se me ocurrió ponerlo contra el margen inferior, pero con tus indicaciones, supe cómo.

La diferencia que tengo entre IE y Firefox es que la leyenda del footer en IE queda dentro de la cinta marrón, y en Firefox queda arriba, pero la verdad, no me preocupa mucho. De ambas formas queda bien.

Muchísimas gracias, Jaime. Es exacto lo que quería.

Jaime Trujillo Escobedo dice...

Ya veo, Ana Laura. Por suerte no es algo que afecte demasiado al diseño.

Me alegro que hayas podido conseguir el footer que deseabas.

Negrevernis dice...

Hola, Jaime.

De entrada, gracias por tus trucos. He podido poner algunas cositas que llevaba tiempo buscando.

He intentado poner un borde en el footer, pero no encuentro la indicación de #footer { que indicas (sólo encuentro post-footer). ¿Puede ser que tenga otro nombre? Tengo una de las plantillas nuevas de blogger. Te dejo la dirección para que veas qué plantilla uso:

En Clase

Gracias de antemano :)

Jaime Trujillo Escobedo dice...

Negrevernis, así es. Se debe a las nuevas plantillas de blogger. En tu caso, busca la línea (y su respectivo bloque) .footer-outer { en lugar de #footer {.

Si necesitas algo más dímelo.

Negrevernis dice...

Hola de nuevo, Jaime.

Te prometo, de entrada, que busco todo con CTRL-F. Tampoco encuentro el .footer-outer { que me indicas.

He mirado la apariencia del blog y he visto que entre el cuerpo de las entradas y las columnas, así como entre las columnas y en el pie del blog hay una finíiiiiisima línea gris casi inapreciable. Lo que queria era remarcar esas líneas en color más oscuro en el pie del blog. ¿Puede ser que a esto se refieran las líneas

/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-$startSide: 1px solid $(body.rule.color);
}

??

Perdón por las molestias y gracias de nuevo.

Un saludo.

Jaime Trujillo Escobedo dice...

Negrevernis, en ese caso, añade este bloque de CSS antes de ]]></b:skin>:

.footer-outer {
background: #cccccc;
border: 2px solid #ff0000;
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Sigue los mismos pasos citados en la entrada.

En cuanto al borde, así es. Dicho bloque pertenece a la fina línea gris. Edítalo para que quede de esta forma:

.section-columns td.columns-cell {
border-left:1px solid #000000;
}

Reemplaza #000000 (color negro) si lo deseas, por cualquier otro color usando la tabla de colores.

Negrevernis dice...

Hola, Jaime.

¡Ya está! Muchas gracias. He combinado lo que me indicas con el poner fondo y ya queda resaltado el footer. Perdón por las molestias.

Un saludo.

Jaime Trujillo Escobedo dice...

Hola Negrevernis. No es ninguna molestia, todo lo contrario; es un placer poder ayudarte.

Saludos!

FILÁ NOSOTRAS dice...

hola jaime me sale la foto del footer detras la tapa la imagen del cuerpo de entradas, mi blog es: http://lomasnueve.blogspot.com/, un saludo

Jaime Trujillo Escobedo dice...

FILÁ NOSOTRAS, necesito saber algo más. ¿A qué imagen te refieres?

FILÁ NOSOTRAS dice...

Jaime gracias por contestarme, quiero decorar el footer, y he hecho los pasos que tu me dices he puesto una imagen 700 de ancho y 200 de alto y si entras a mi blog no se ve nada, y no se lo que hacer, un saludo

Jaime Trujillo Escobedo dice...

FILÁ NOSOTRAS, se debe a las imágenes de fondo de la sidebar (barra lateral) y del bloque de entradas. La imagen del footer aparece pero la 'tapa' el fondo de la zona de entradas.

Tendrías que atribuir un color de fondo para solucionarlo o mantener el fondo actual sin incluir la imagen en el pie del blog.

FILÁ NOSOTRAS dice...

Jaime quito la imagen y tampoco se ve la imagen del el footer, tendre algo mal? gracias

Jaime Trujillo Escobedo dice...

Filá nosotras, prueba a utilizar este bloque de CSS:

#footer-wrapper{margin-bottom: -10px; border:2px solid #FF0000; background:url("http://img842.imageshack.us/img842/8048/foodercopia.png") repeat scroll 0 0 transparent;}

En lugar del de #footer {...

De todas formas, en la plantilla ocurre algo extraño ya que únicamente la zona de las entradas tapa parte de la imagen. Es probable que sea debido al truco: sidebar y zona de entradas con la misma altura.

Anónimo dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.
Anónimo dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.
Anónimo dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.

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