Truco: Añadir tres columnas en la sección del footer (pie del blog)

Nota de El Escaparate de Rosa

Añadir tres columnas en la sección del footer (pie del blog)

[1] Necesitaremos retirar cualquier elemento que tengamos colocado en el footer del blog. Podemos moverlo a la sidebar de forma temporal y, una vez añadidas las tres columnas en el footer, volver a colocarlo en esa sección.



[2] Iremos ahora a la parte del HTML de nuestra plantilla y buscamos, casi al final de su código, estas líneas Sin expandir artilugios:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

[3] Dependiendo de la plantilla que estemos usando, podría cambiar el código a buscar ("footer" o "footer-wrapper"), en el caso de la Rounders, por ejemplo, hay dos divs en la sección del footer, en cualquier caso, el código que hemos de cambiar es la línea que está resaltada en negrita, sustituyéndola por este código:

<div id='footer-columna-contenedor'>



<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>




<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>



<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>



<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>



<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>


</div>



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

<p>

<hr align='center' color='#6633FF' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>



<b:section class='footer' id='col-bottom' preferred='yes'>

<b:widget id='Text20' locked='false' title='' type='Text'/>


</b:section>



</div>

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



</div>

[4] Añadiremos ahora unas líneas de CSS para controlar la separación de las columnas. Pegamos estas líneas antes de ]]></b:skin>

#footer-columna-contenedor {

clear:both;

}



.footer-columna {

padding: 10px;

}

Vista "editar"









Vista "blog"





[5] Ya podemos guardar los cambios y colocar los elementos que habíamos retirado a la sidebar donde nos parezca mejor.



[6] En el código está incluida una línea de separación entre las tres columnas y el footer antiguo, en el ejemplo podéis ver que se muestra de color azul.


La parte del código que hace que se vea esta línea, es esta:

<hr align='center' color='#5d5d54' width='90%'/>

Podemos cambiar su color en color='#5d5d54'

También podríamos prescindir de ella borrando la línea por completo.



Nota:

Consulta como modificar el diseño de las columnas con CSS