Tres columnas en el pie del blog

Hoy he instalado tres columnas en el pie de este blog, ¿Te apetece ponerlas en el tuyo?

Ante todo debemos retirar cualquier elemento que tengamos colocado en el pie del blog desplazándolo momentáneamente a la sidebar.

Accederemos a nuestra plantilla en “Edición Html” no es necesario expandir los artilugios y buscaremos el siguiente código en la plantilla.


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


Cambiaremos la línea <b:section class='footer' id='footer'/> 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>

</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>


Una vez hemos añadido el código anterior antes de ]]></b:skin> pegaremos este nuevo código.

#footer-columna-contenedor {
clear:both;
}

.footer-columna {
padding: 10px;
}
Guardamos los cambios y ya podemos colocar los elementos que habíamos retirado a la sidebar en el sitio que deseemos, el resultado final seria este:

Related Posts with Thumbnails