Dividir el footer del blog

Ya vimos cómo dividir la cabecera del blog y cómo dividir el crosscol, ahora le toca el turno al pie del blog, o sea, a la parte que se encuentra hasta abajo de la plantilla mejor conocida como footer. Así que en esta entrada veremos cómo dividir el footer del blog en tres columnas para poder agregar ahí algunos gadgets.

Pasaremos de esto:

A esto:

Para los que usan una plantilla del Diseñador de Plantillas de Blogger eso puede hacerse desde el momento de la creación de la plantilla, sólo hay que ir dentro del Diseñador de Plantillas y en la pestaña Diseño hay que elegir la estructura de la plantilla, en la sección Diseño de pie de página puede seleccionarse el footer simple, dividido en dos, o dividido en tres.

O bien, también puede hacerse directo en la plantilla, así que vamos a ver cómo dividir el footer del blog tanto en esas plantillas como en las plantillas antiguas.

Empezaremos con las plantillas hechas con el Diseñador de Plantillas de Blogger, primero vamos a quitar temporalmente cualquier gadget que haya en esa área, puedes arrastrarlo a la sidebar, ya cuando termines con los cambios podrás moverlo de nuevo al footer.

Ya que esté libre esa área entra en Diseño | Edición de HTML y SIN expandir los artilugios busca esta línea:

<b:section-contents id='footer-1'/>

O si ya está dividido en dos busca esta otra:

<b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/>

Ya localizada cualquiera de esas partes elimínala con cuidado y en su lugar pon esto:

<b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/><b:section-contents id='footer-2-3'/>

Con eso estará dividido el footer en tres columnas. No se verá la columna extra hasta abajo que se aprecia en la imagen de ejemplo pues en el caso de esas plantillas los gadgets pueden arrastrase arriba de los créditos y funcionará de igual manera.

En el caso de las plantillas antiguas de Blogger el procedimiento es un poco diferente; primero habremos de quitar cualquier gadget de ahí, y luego SIN expandir artilugios busca este código:

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

Elimínalo y en su lugar coloca este otro:

<div id='footer-wrapper'>

<div id='footer0' style='text-align: center; padding: 5px;'>
<b:section id='footer-superior' preferred='yes'/>
</div>

<div id='footer1' style='width: 32%; float: left; margin:0; padding: 5px;'>
<b:section class='footer' id='foot1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 31%; float: left; margin:0; padding: 5px;'>
<b:section class='footer' id='foot2' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 32%; float: right; margin:0; padding: 5px;'>
<b:section class='footer' id='foot3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer4' style='text-align: center; padding: 5px;'>
<b:section id='footer-inferior' preferred='yes'/>
</div>

<div style='clear:both;'/>
</div>

Dependiendo de cada plantilla quizá sea necesario ajustar los porcentajes a valores más pequeños por si alguna de esas área se moviera hacia abajo, ya dependerá de cada caso y que cada quien experimente con las medidas que más se ajusten a su plantilla.

Si quisieras agregarle un poco de estilos a esa área sólo agrega antes de ]]></b:skin> lo siquiente:

#footer-wrapper h2{
background:#0B243B; /* Color de fondo de los títulos */
color:#fff; /* Color del título */
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 16px; /* Tamaño de la fuente del título */
}
.footer{
background:#ccc; /* Color de fondo de los gadgets */
}

Y con eso tendrás el footer del blog dividido para que puedas aprovechar su espacio y agregar más gadgets de forma ordenada en el blog.