El truco Blogger de hoy consiste en aprender a dividir el Footer del blog en 3 columnas. Para el que no sabe, el footer es la parte más inferior de nuestro blog el cual casi no tiene funcionalidad, pero gracias a este truco aprenderemos a dividir el Footer del Blog en 3 columnas para poder añadir más elementos en él.
Para que se den una idea, luego de aplicado les quedará tal cual tengo aplicado en este mismo blog como se puede ver en esta imagen (click para ampliar):
Y al dirigirnos a Diseño > Elementos de Página e intentar añadir un gadget veremos la división de las columnas de esta forma:
Bien, antes de dividir el Footer del blog en 3 columnas vamos a arrastrar todos los elementos que tienes en el footer a la sidebar (barra lateral) para conservar estos elementos y luego colocarlos en el Footer nuevamente. (Este paso es por seguridad simplemente).
Ahora si nos dirigimos a la Edición HTML de la plantilla y buscamos por el siguiente código:
Para que se den una idea, luego de aplicado les quedará tal cual tengo aplicado en este mismo blog como se puede ver en esta imagen (click para ampliar):
Y al dirigirnos a Diseño > Elementos de Página e intentar añadir un gadget veremos la división de las columnas de esta forma:
Bien, antes de dividir el Footer del blog en 3 columnas vamos a arrastrar todos los elementos que tienes en el footer a la sidebar (barra lateral) para conservar estos elementos y luego colocarlos en el Footer nuevamente. (Este paso es por seguridad simplemente).Ahora si nos dirigimos a la Edición HTML de la plantilla y buscamos por el siguiente código:
<div id='footer-wrapper'><b:section class='footer' id='footer'/></div>Una vez encontrado lo reemplazamos completamente por el siguiente código:
<div id='footer-wrapper'><div id='footer-column-container'><div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'><b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'></b:section></div><div id='footer-column-center' style='float:left; width: 32%;margin: 2px'><b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'></b:section></div><div id='footer-column-right' style='float:right; width: 32%;'><b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'></b:section></div><div style='clear:both;'/><div id='footer-bottom'><b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'></b:section></div><div style='clear:both;'/></div></div><div style='clear:both;'/>Hacemos vista previa y si no encuentra ningún error guardamos los cambios. Ahora cuando vayamos a Diseño > Elementos de Página veremos las tres columnas como en la imagen anterior y podemos volver los elementos que habíamos arrastrado a la sidebar anteriormente, así como también añadir nuevos elementos.
Si la parte de las 3 columnas queda sin color de fondo podemos añadir la siguiente línea al CSS para darle color:
Donde la parte final del código (solid #0000FF) indica el color de fondo.
Con esto ya tienes tu Footer dividido en 3 columnas para poder darle mayor utilidad. Espero que te sirva!
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
Si la parte de las 3 columnas queda sin color de fondo podemos añadir la siguiente línea al CSS para darle color:
#footer-wrapper{background-color: #ffff66;border: 1px solid #0000FF}Donde la parte final del código (solid #0000FF) indica el color de fondo.
Con esto ya tienes tu Footer dividido en 3 columnas para poder darle mayor utilidad. Espero que te sirva!
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
7 comentarios:
Pues nada que no he sido capaz , y mira que me gusta como te ha quedado.
Buenos ... es que soy un carroza y esto no se me da bien.
donde coloco línea al CSS para darle color
Hola bueno este comentario es para decirte que tu blog fue nominado a la categoria de Blogger en los premios WinBoox Awards 2009
(el concurso es solo de diversion y si es el ganador tu blog de la categoria te daremos una insignia para que pongas en tu blog como el ganador)
saludos :D :D
ahora lo unico que tienes que hacer es difundir tu nominacion con el medio que quieras para que pasen a votar por tu blog (el voto es por comentarios)
Hola aqui otra noticia sobre los WinBoox awards 2009, para tener mas votos puedes subir un post diciendo que estan nominados y un link,
ademas este comentario es para acerte saber si no sabes que estas nominado en la categoria de Comics
SUERTE
la votacion se acaba el 15 de diciembre
@VRedondoF
Dime cual es la parte que no puedes realizar asi te ayudo.
@Andres Fanatico
Deberias pegarlo en la seccion del footer del CSS
Buenisimo gracias lo pude aplicar...
Publicar un comentario en la entrada
Lea las reglas:
Todos los comentarios serán leídos y moderados previamente.
Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.
OBS: Los comentarios de los lectores no reflejan las opiniones del blog.