Dividir el Footer(pie de pagina) del blog en 3 columnas

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, les dejare una imagen para que se den cuenta como quedara el footer.

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

Nota: Antes de editar la plantilla, te recomendamos que guardes una copia de ella.

Ahora si nos dirigimos a la Edición HTML de la plantilla y buscamos 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:

#footer-wrapper{background-color: #ffff66;border: 1px solid #0000FF}

Donde la parte final del código (solid #0000FF) indica el color linea y (
background-color: #ffff66) indica color de fondo.

Con esto ya tienes tu
Footer dividido en 3 columnas para poder darle mayor utilidad.

Fuente: vidablogger

2 comentarios:

Los Rockers dijo...

hola, muy buen post, me resultó, pero yo tenia un texto y ese no ve, cómo le puedo poner color a las letras?

Miki-kun dijo...

muchas gracias por la informacion me fue de mucha ayuda *o*

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika