AÑADIR TRES COLUMNAS EN LA SECCIÓN DEL FOOTER

By Blogs Famag - jueves, enero 11, 2018

AÑADIR TRES COLUMNAS EN LA SECCIÓN DEL FOOTER

Para conseguir este Truco primero tenemos que hacer lo siguiente.

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.

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:

-------------------------------------------------

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

</div>

--------------------------------------------------

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:

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;
}

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

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'

------------------------------------------------------------------------------------------------------------------------

MODIFICAR LAS COLUMNAS DEL FOOTER

Antes expliqué como añadir tres columnas en el footer

Poco después de publicar esta entrada me han empezado a llegar consultas sobre la forma de adaptar esas nuevas columnas, para conseguir una apariencia lo más parecida posible a la sidebar del blog. Esto se consigue usando el CSS.

Si nos fijamos en el código añadido para mostrar las columnas, veremos que cada una de ellas tiene una id propia: id='col1', id='col2',id='col3'

Usaremos esa id para modificar su aspecto, para ello vamos a la parte de editar-html de nuestra plantilla y sin expandir artilugios localizaremos la etiqueta ]]></b:skin>.

Justo encima de ]]></b:skin> pegaremos este código:

#col1{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col1 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

En: #col1, #col2 y #col3, controlaremos el aspecto de cada columna y en: #col1 h2, #col2 h2 y #col3 h2, lo haremos con el titulo de los elementos que pongamos en cada una de ellas.
Lo más cómodo será mirar en el código de nuestra sidebar e ir copiando lo que necesitemos: border, text-aling, font-size...para asemejar lo más posible las nuevas columnas a la sidebar del blog.

Nota
Tendréis en cuenta que el código que he puesto como ejemplo, es el de mi sidebar y su título, vosotros tendréis que probarlo con los vuestros.
También podríamos prescindir de ella borrando la línea por completo

Fecha: 11/01/2018

Fuente: elescaparatederosa.blogspot.com.es

Publicado por: