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.