Tres columnas en el footer (pie de página)
Labels:
Trucos
at
viernes, noviembre 21, 2014
Si quieres tener un espacio más abierto, más personal, tres columnas en las que puedes poner directorios, direcciones o las típicas cosas que no te gustan poner en la sidebar, puedes seguir estos simples pasos y aplicar al pie de tu blog tres lindas columnas...
- Debes asegurarte de que no tienes ningún gadget (elemento de página) en el footer del blog, si tienes alguno muévelo a la sidebar. Después podrás volverlo a colocar.
Busca este pequeño bloque:
Busca la etiqueta ]]></b:skin> y encima le pegaremos:
En el código hay una línea que separa las tres columnas del footer, es una línea negra, y la línea de código que la representa es esta: <hr align='center' color='#000000' width='90%'/> si quieres que no aparezca la línea separatoria, borra la línea de código y listo. Si por el contrario quieres cambiar el color, puedes hacerlo en color='#000000'.Guardamos plantilla.
¡En Diseño verás que hay tres columnas en las que puedes añadir más gadgets!
<div id='footer-wrapper'>La línea que está en rojo tienes que borrarla y pegar esto en su lugar:
<b:section class='footer' id='footer'/>
</div>
<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='#000000' 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'/>
<div style='clear:both;'/></div>
</div>
</div></div>
Busca la etiqueta ]]></b:skin> y encima le pegaremos:
#footer-columna-contenedor {
clear:both;
}
.footer-columna{
padding:10px;
}
En el código hay una línea que separa las tres columnas del footer, es una línea negra, y la línea de código que la representa es esta: <hr align='center' color='#000000' width='90%'/> si quieres que no aparezca la línea separatoria, borra la línea de código y listo. Si por el contrario quieres cambiar el color, puedes hacerlo en color='#000000'.Guardamos plantilla.
¡En Diseño verás que hay tres columnas en las que puedes añadir más gadgets!
- El truco no se ve en vista previa, pero presionar vista previa para comprobar que el blog carga de manera correcta.
Si te gusta la entrada compártela.
¡Gracias!
Copyright © 2013
Cambio-Cambie Blogger
Diseñado por CCB Desarrollado por Blogger
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.
►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>
No olvides suscribirte para recibir las actualizaciones