sábado, 12 de abril de 2008

Como colocar tres columnas al pie de pagina

Hola devuelta. En el tutorial de hoy vamos a ver como colocar 3 columnas en el pie de pagina como vemos en la imagen,esto nos servira para poner muchas mas cosas y tener mas espacio en nuestro blogger.

1- Primer lugar tienes que ir a diseño y despues "elementos de la pagina", una vez que allamos accedido tenemos que sacar todos los elementos que hay y dejarlo vacio.

2- Luego vamos a "Edicion de HTML". Sin expandir plantillas de artilugio, buscamos el siguiente codigo. (te recomiendo que presiones control+f para buscar los codigos mas facilmente.)

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

Muchas platillas en lugar de estas lineas tienen "footer" o "footer-wrapper" dependiendo cual tengan.

3- Una vez visualizado vamos a tener que remplazar el codigo que esta en negrita, por este :

<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='Text2' locked='false' title='' type='Text'/>
</b:section>

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

</div>

4- Haora que ya tenemos el codigo remplazado vamos a pegar las siguentes lineas antes de

]]></b:skin>

Codigo:

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

.footer-columna {
padding: 10px;
}

5- Listo una vez agregaddo todos esos codigos vamos a tenes nuestras 3 columnas como en la imagen. Espero que te alla servido, un saludo GRANDE.....

4 comentarios:

  1. t5engo un pproblema con la mia no se que hacer si quieren ver utilizo una plantilla llamada "grafitti art"
    si puedes ayudarme pasa por mi paguina web es http://www.lords-of-music.blogpost.com
    y mi msn es bley-91@hotmail.com....

    ResponderEliminar
  2. NoPuedo!!!! POrfa quien m e ayuda!1!!!

    pancho08_greenday@hotmail.com

    ResponderEliminar
  3. Hola,
    Les comento que esto anda perfectamente en la plantilla "MINIMA".
    No fue probado con otras plantillas, y puede ser que no ande

    Saludos!

    ResponderEliminar

Dejanos tu comentario

 
Web Analytics