lunes, 29 de junio de 2009

PERSONALIZAR FOOTER

El footer es la parte inferior del blog, en ocasiones muy desaprovechado, normalmente se suele poner información resaltante del blog como puede ser información del autor, tipo de plantilla empleada, antiguedad del blog y bueno todo aquello que creáis oportuno que vuestros visitantes deben saber a cerca de la construcción del mismo. Personalmente a mi no me gusta que el footer tenga un grosor grande ya que vi en algunas ocasiones que ocupa casi el mismo espacio que la pantalla principal, para gustos los colores, por ello vamos a ver como personalizar esta parte ya que no deja de ser menos importante que las demás.

A grandes rasgos esta es la estructura de la que estoy hablando, principalmente nos centraremos en el FOOTER.
Primer paso:(Comprobaciones previas)

Deberemos de ir a Diseño->Edición HTML y buscar las siguientes partes de código.

Primera parte:
#footer {
width:660px;
Segunda parte:

#outer-wrapper {
width: 660px;
Deberemos asegurarnos que los valores señalados en azul son los mismos, en caso contrario adaptaremos el tamaño del footer al mismo que outer-wrapper.

Segundo paso:(Añadir FOOTER)

Buscaremos la siguiente parte de código:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
La sustituiremos por las siguientes líneas de código:

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

</div>
Con esto lo que hemos creado el siguiente espacio:


Tercer paso:(Personalizar)


Añadir color o imagen de fondo al footer, lo haremos añadiendo la siguiente linea al final de:

#footer {
...
Aqui añadir la linea
}
Añadiremos una linea de la siguiente forma:

1. Si solo queremos añadirle color al fondo:

background-color: #CodigoColor;
2. Si queremos añadirle una imagen de fondo:

background-image:url('Url de imagen');
El atributo height:Tampx; indica el alto del footer por tanto podremos modificar su valor para adaptarlo a nuestro gusto.

Nota: Tener un poco de paciencia y ir modificando los valores hasta que el resultado sea de vuestro agrado, no esperéis obtener reltados perfecto a la primera, de todas formas si tenéis algun duda, hacer uso de los comentarios.

28 Comentarios:

Anónimo dijo...

¿Cómo añadir footer si no aparecen ni la primera ni la segunda parte del código?

caxitos dijo...

Anonimo Lo que no te aparece es el outer-wraper?, estas partes de código se corresponden con la cabecera, si quieres deja la dirección de tu blog y la plantilla que utilizas y te indico exactamente.Un saludo.

Javier dijo...

http://larazadecain.blogspot.com/

La plantilla es Herbert, y estoy haciendo pruebas y modificaciones para que tenga un aspecto presentable, aparte de los contenidos, claro.

Tengo que decirte que soy bastante torpe y mis actuaciones sobre la plantilla son más intuitivas que otra cosa, pues aún me acuerdo de algunas cosas de cuando programaba en basic.

GRACIAS Y UN SALUDO

Javier dijo...

Se me olvidaba: quizá haya influido en que no vea el código #footer (el #outer-wrapper { si aparece) el hecho de que modifiqué la plantilla para añadir una sidebar, y eso haya descolocado los posicionamientos del pie...

Un saludo.

Anónimo dijo...

como hago para que en mi blog aparezca el mismo efecto que en el tuyo, ese de que las letras del titulo de tu blog en la pestaña se mueven??

caxitos dijo...

Ascensino96 Puedes verlo en la siguiente url: http://sitiooriginal.blogspot.com/2009/03/titulo-blog-en-movimiento.html espero que te sea de utilidad ;)

caxitos dijo...

Jonhy Creo saber cual es el problema pero antes de decir nada me gustaría saber en que momento te empezó a aparecer esto de esta forma. Que es lo que modificaste? Si es posible orientame pero tiene toda la pinta de ser la propiedad top entre la cabecera y los post.Un saludo ya me dices algo.

Luis Burgos dijo...

Cómo puedo hacer para poner 2 widgets html/java (videos centrados horizontalmente)c/u de un ancho editado menor que la mitad del ancho del footer pero igual se me ubican uno encima del otro? Saludos.

caxitos dijo...

Luis Burgos Para centrar, tendrás que hacerlo añadiendo en el código de widget lo siguiente:
<center> Codigo del widget </center>
En Codigo del widget pondrás el código de tu video.

Anónimo dijo...

muchas gracias por esta entrada aunque la parte del codigo que mencionas ( footer ) no la encontre por ningun lado sera por que es una plantilla externa a blogger
lo unico que hice fur la substitucion del codigo y me quedo pefecto!!!
ese espacio de momento lo use para poner un banner
pero se le puede dar bastantes usos

saludos y nuevamente gracias por la entrada

nieves dijo...

hola, uso la plantilla herbert y no tiene pie o footer.. me gustaria añadirlo pero el meter en Ctrol + F los trocitos que das en los pasos 1 y 2 no me aparece nada en absoluto, es decir, mi plantilla no los trae.. como puedo crear un pie de pagina?¡

Mi problema creo q es el mismo que el de Javier Garcia y entre en su blog y por lo que he visto consiguio solucionarlo pero aki no aparece como.. si pudieras ayudarme t lo agradeceria muxo

http://oscuridadparcial.blogspot.com/ este es mi blog

gracias

nieves dijo...

tngo la plantilla herbert y creo tener el mismo problema que javier garcia.. al buscar.. en mi html no encuentro ninguno de esos codigos, ni los del paso 1 ni los del 2.. entonces cual es la solucion?¿ como puedo poner el pie de pagina si no tngo esos codigos?¿

mi blog es: www.oscuridadparcial.blogspot.com

gracias.

caxitos dijo...

oscuridadparcial Que es lo que no encuentras? el footer? Debo decirte que estos cambios hay que hacerlos con mucho cuidado y mas si no tiens conocimientos de CSS y HTML, respondeme exactamente a ques es lo que no encuentras y en caso de que no te aclares puedes mandarme la plantilla por correo y vemos que es lo que se puede hacer. Un saludiko!!

Editorial Perro Azul dijo...

HOLA!!
Tengo un gran espacio vacío justo debajo del footer y no sé qué hacer para que no apareza, es decir, que en el último gadget del footer termine la página.
GRACIAS!!

Merlina dijo...

Hola Caxitos, mi problema es que en vez de cerrar footer'/>
(con div)
cierra footer'>

(y sin div)

Asi es mi plantilla. Por eso no lo acepta porque está mal formado.
¿Alguien me podría ayudar?
Gracias.

ofo1965 dijo...

Hola Caxitos, mi footer no esta centrado. ¿Me podrías ayudar?.

Gracias.

caxitos dijo...

ofo1965 Para centrar cualquier cosa en puedes utilizar las etiquetas <center> Codigo </center>, de esta dorma centrarás cualquier cosa, concretamente creo que lo que tines mal es que en el footer tienes una imagen de fondo muy grande.

ofo1965 dijo...

Gracias.
Que rápido!!.
Lo habia conseguido, la etiqueta<. Pero tienes razón con lo de la imagen. Voy a ver si puedo quitarla.

caxitos dijo...

ofo1965 Ok intentalo si ves que tienes algún problema ya sabes donde recurrir.

Revista UNO dijo...

Realmente estoy algo complicado con el footer de mi blog, ya que hago los cambios e igual no se modifica la imagen. No suelo escribir comentarios porque imagino que tardan en responder, pero si puedes responderme, me avisas ya que al blog lo tengo "cerrado" porque justamente lo estoy rediseñando. Cualquier cosa te dejo mi msn: revistauno@msn.com. Gracias!

Demae dijo...

Estoy intentando poner el footer pero no hay manerra... veamos estoy trabajando sobre una plantilla, se supone que en esa plantilla ya esta credo el footer pero no me aparece ni en el blog ni en la paguina de diseño... xq puede ser??

Mi codigo esta asi:

div id='footer-wrapper'
div id='footer-left'
p Copyrigh bla bla bla p
/div
div id='footer-rt'
div class='clr'/

/div

(quite los <>)
donde footer-left y footer-rt son elementos de una imagen y fondo cada uno, xq la idea de la plantilla es que se vea el final de la parte central del blog y el fondo justo por abajo... que he de cambiar para q salga???

caxitos dijo...

Demae Segun veo si que te tendria que aparecer algo como footer ya que tienes un div y por tanto se debe de mostrar, fijate en la definición de la clase y prueba a ponerle un color de fondo llamativo con el objetivo de que localices donde se encuentra.
Lo cierto es que así sin ver nada mas es complicado darte una solución, espero que consigas sacar algo en claro! Un saludo!

Maga DeLin dijo...

Hola, Caxitos.

Esto te lo han preguntado ya un par de veces, pero es que no logro centrar las imágenes que he puesto en mi blog.
Debo poner < center > < /center >?? (lo pongo con espacios porque sino no me deja publicar el comentario.

El blog del que te hablo es www.vampirelandia.blogspot.com

Gracias por tu ayuda. Saludos!!

Emilio M. Luna dijo...

Quisiera añadirle el footer porque mi blog no tiene ninguna de las partes que nombras en en los dos primeros pasos.
Te dejo mis dos blogs: el de prueba incluido.

http://elantepenultimomohicano.blogspot.com/
http://pruebasmohicano.blogspot.com

Gracias de antemano.

Unknown dijo...

Hola auxilio xfa tengo un problema con mi blog, es el de la empresa donde trabajo y yo lo administro, el problema es que cambie la plantilla y ahora no me da ningunna opci{on de publicar entradas o regresar a la plantilla anterior. lo unico que muestra es lo que habia publicado anteriormente. Ayuda urgente x favor, cómo regreso al estatado anterior

Unknown dijo...

ayuda urgente cómo puedo regresar a mi plantilla anterior?
el problema es q elegi una pero ya no me da las opciones de diseño no de publicar entradas.

caxitos dijo...

Sanaire La única opción para volver a la situación anterior es tener una copia de seguridad y restaurarla, si administras el blog de tu empresa eso es lo primero que deberías hacer cada cierto tiempo hacer copias de seguridad, al cambiar el formato de la plantilla todo el código cambia y las dependencias clases etc cambian por lo que sinceramente es una cuestión bastante complicada.

Lo que podrías probar es buscar la plantilla anterior seguro que la encuentras por internet y volver a cargarla nuevamente, puede ser una opción. Recuerda antes de hacer nada copia de seguridad antes de que se estopee más la cosa.

Un saludo.
Suerte!

Publicar un comentario

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.