Footer multicolumna en Blogger

El footer corresponde al pié de página, es la sección que se muestra debajo del blog. En este tutorial les enseñaré una forma de añadir varias columnas para aprovechar ese espacio que muchas veces no se aprovecha.

Primero, tienes que saber que el footer no debe contener espacios para gadgets, si los contiene, deberás eliminar toda línea que se encuentre en él.

El resultado será muy similar a este (Clic para aumentar):

El estilo variará según sus necesidades.

¿Cómo añadir el footer en Blogger?

Recomiendo encarecidamente hacer un respaldo de la plantilla por si algo no sale bien.

Paso 1: Eliminando el contenido del footer anterior:

Sabiendo que en las mayorías de las plantillas el footer se denomina footer-wrapper, lo que haremos será eliminar todo el contenido dentro del contenedor.

Para ello busca el siguiente código:

<div id='footer-wrapper'>

Deberás eliminar todo lo que se encuentre entre ese código y el cierre (Es decir hasta el </div> del contenedor).

Ahora que ya eliminaste todo rastro del contenido interno del footer, deberás eliminar los estilos del footer anterior, los cuales se definen por el siguiente código que se encuentra antes de ]]></b:skin>:

#footer-wrapper {
todos estos atributos serán eliminados.
}

Ahora guarda los cambios.

Paso 2: Añadiendo las nuevas secciones:

Ahora que ya tienes el footer vacío y sin atributos, lo que haremos será crear la estructura. Para ello deberás buscar la siguiente línea:

<div id='footer-wrapper'>

Debajo de esta, deberás pegar el siguiente código:

<div id='piedepagina'>

<div id='izquierdafooter'>

<h6>Título de la columna 1</h6>

Contenido de la primera columna.

</div>

<div id='centradofooter'>

<h6>Título de la columna 2</h6>

Contenido de la segunda columna.

  </div>

<div id='derechafooter'>

<h6>Título de la columna 3</h6>

Contenido de la tercera columna.

 </div>

 </div>

Para que lo entiendas mejor, he realizado este esquema el cual muetra cada columna dentro del contenedor:

Paso 3: Añadiendo los nuevos atributos CSS:

Ahora antes de ]]></b:skin> deberás pegar el siguiente código:

/*Contenedor general*/
#footer-wrapper {
margin-bottom:10px;
background:#969696; /*Color de fondo del footer*/
width:100%; /*Esto permite que el footer se muestre al 100% del blog*/
padding:15px; /*Espaciados*/
margin-left:auto; /*IGNORAR*/
margin-right:auto; /*IGNORAR*/
line-height: 1.5em; /*Separado entre líneas de texto*/
font-size:12px; /*Tamaño de fuente*/
}

/*Contenedor de las 3 columnas*/
#piedepagina {
border-radius:13px; /*Bordes redondeados*/
color:#fff; /*Color del texto*/
width:940px; /*Ancho del contenedor*/
height:210px; /*Alto del contenedor*/
margin:50px auto; /*Permite centrar el contenido*/
font-family: Century Gothic, sans-serif;  /*Tipografía*/
text-align:left; /*Alineación del texto*/
margin-bottom:20px; /*Separación del borde inferior*/
background:#2d2d2d; /*Color de fondo*/
}

/*Enlaces*/
#piedepagina a{
color:#fff; /*Color de los enlaces*/

}

/*Títulos*/
#piedepagina h6 {
color:#fff; /*Color de los títulos*/
font-size:16px;  /*Tamaño de los títulos*/
margin:10px; /*Separación de los títulos*/
}

/*Columna izquierda*/
#izquierdafooter {
padding:10px; /*Espaciados internos*/
margin:0px;  /*Distancia entre contenedores*/
background: url(http://3.bp.blogspot.com/-Wyk_YzkLG6U/TlJ2xmoNbeI/AAAAAAAABiw/C5Wk7lwhGGw/s1600/vertical+linea+ayudabloggers.png) right no-repeat; /*Imagen separadora*/
width:30%;  /*Porcentaje del ancho de la columna*/
height:200px;  /*Alto de la columna*/
float:left; /*Permite alinear a la izquierda esta columna*/

}

/*Columna media*/
#centradofooter {
padding:10px; /*Espaciados internos*/
margin:0px;  /*Distancia entre contenedores*/
width:30%;  /*Porcentaje del ancho de la columna*/
height:200px; /*Alto de la columna*/
float:left; /*Permite alinear a la izquierda esta columna*/
}

/*Columna derecha*/
#derechafooter {
padding:10px;  /*Espaciados internos*/
margin:0px; /*Distancia entre contenedores*/
width:30%; /*Porcentaje del ancho de la columna*/
height:200px; /*Alto de la columna*/
float:right; /*Permite alinear a la derecha esta columna*/
background: url(http://3.bp.blogspot.com/-Wyk_YzkLG6U/TlJ2xmoNbeI/AAAAAAAABiw/C5Wk7lwhGGw/s1600/vertical+linea+ayudabloggers.png) left no-repeat; /*Imagen separadora*/
}

Guarda los cambios y listo.

Importante:

• Cada línea tiene una pequeña descripción para que no te confundas y para que puedas añadir el contenido exitosamente.
• Para añadir o quitar columnas, es necesario dar flotación, disminuir o aumentar los anchos de las columnas y además crear o eliminar las reglas.
• Si en tu plantilla el footer-wrapper no existe, deberás buscar la línea correspondiente, o si tu plantilla no tiene footer, crea el contenedor con ese nombre.
• El procedimiento está detallado para no generar problemas, pero si tu plantilla es complicada puedes postearla y agrego yo personalmente los códigos correctamente.