AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Tres columnas en el pie de página

sábado, 16 de febrero de 2008

No se si has bajado hasta el final de esta página. Si lo has hecho habrás visto que hay allí 3 columnas más encima del pie de página "normal".
Hace días que lo tengo colocado, casi desde que Rosa (como no) publicó el truco y voy a contártelo por si te apetece ponerlo en práctica en tu blog.
Resulta muy útil si tienes una o dos sidebars muy llenas, para descongestionarlas un poco. Como ves yo las utilizo para colocar los "chivatos", algunos logotipos y otras tonterías, de este modo las sidebars no se alargan más que las entradas.

---
¡Vamos a ello!
Para empezar, si tienes algo colocado en el pie de página original, alguna imagen o algo así, debes apartarlo. para ello es suficiente con que lo coloques momentáneamente en la sidebar, ya volverás a ponerlo donde estaba.
Ahora entra en Diseño/Edición de HTML y sin expandir artilugios busca, casi al final, este código


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

Aunque no todas las plantillas son exactas, la línea que nos interesa, la que está resaltada en negrita, si debería estar en todas.
Una vez localizada, sustituye dicha línea 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='Text2'locked='false'title=''type='Text'/> </b:section>
</div>
<div style='clear:both;'/>
</div>



Fíjate que hay un 2 que he remarcado en rojo entre el código azul. Si tienes más de dos elementos Texto, esos en los que escribir algo, cambia este número por uno más alto.

Ahora vamos a la parte del CSS y encima de ]]></b:skin> pegaremos estas líneas:

#footer-columna-contenedor {
clear:both;
}
.footer-columna{
padding:10px;
}


Vista previa y si la página carga bien, pues no verás cambios a simple vista, Guardar plantilla.
Una vez guardada, entra en Elementos de la página y allí verás las tres columnas, en el pie de página, cada una con su Añadir elemento de página correspondiente.
Si visitas a Rosa en esta entrada tiene una captura de como se ve.

Imprime esta entrada

16 comentarios. ¿Quieres añadir el tuyo?

  1. paqui ha dicho
  2. Hola Eulalia lo he puesto en mi blog, si puedes pasas y me dices que tal quedo.
    Gracias, besicos

  3. Ana y bego ha dicho
  4. hola Eulalia no se que pasa pero pongo el codigo tuyo y no me deja ponerlo en la plantilla y pongo el codigo de rosa que pienso que es igual y si puedo

  5. Eulalia ha dicho
  6. Hola ana: Mira, gracias por decírmelo, pues creo que hay un pequeño error en este. Me he comido un espacio.
    Ahora mismo lo arreglo. Gracias.

  7. Pepe HR ha dicho
  8. A mi no me funciona esto Laulia, cuando doy a vista previa, me dice esto...
    >>>No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".<<<

    Como que hay un error el la parte donde dice b:widget.

    Dime a ver, que se puedo hacer, otra cosa, en vez de en tres me gustaria que fueran 4, ¿podia ser?..
    Un saludo, Laulia

  9. CociNarte21 ha dicho
  10. HOLA MI BLOG SE LLAMA http://cocinarte21.blogspot.com me gustaria que pasaras a verlo para que me puedas decir los errores que tiene y como corregirlos, me gustaria agregarle un indice de recetas y un link como este para comentarios ya que de momento nadie me puede dejar comentarios en las entradas. gracias y te felicito tu blog esta fenomenal.

  11. Eulalia ha dicho
  12. CociNarte:
    Tu blog si que tiene el enlace, el problema es que no funciona.
    Echale una ojeada a esta entrada. Posiblemente puedas arreglarlo.
    Saludos.

  13. El panal de la Abejita ha dicho
  14. Hola Eulalia!!! Te felicito por tantos aportes que brindas para el bien de todos. Has hecho una excelente labor. Estoy nueva en este mundo bloguero, desde abril exactamente y poco a poco he ido adecuando mi blog pero aún me falta muchoooo. Quisiera agregar una columna más. Mi plantilla es de dos columnas. Revisando tus instrucciones intente agregarla pero no resultó. Te pido por favor, si tienes un tiempito visitame y dame tu opinión. Desde Venezuela cariños y muy agradecida. Mi dirección http://elpanaldelaabejita.blogspot.com . Gracias!!! Marisela:)

  15. Mayra Falcón ha dicho
  16. Hola Eulalia!
    Yo ya tengo en mi blog (de pruebas por ahora) estas tres columnas en el pie de página, le he puesto un fondo al contenedor, pero quisiera saber si este fondo puede ocupar todo el ancho del blog o pantalla (como si fuera parte del fondo)?.

    Mi blog ahora tiene como fondo una imagen rosada (el fondo de todo) y donde van las entradas y el sidebar es blanco (la suma de ambos 960px), y el tamaño del contenedor es la suma del sidebar y la zona donde van las entradas 960px.

    He intentado hacerlo yo misma pero no me sale.

    Así pegado a los lados y abajo quisiera el footer:
    1.http://chicablogger.com/
    (las 2 zonas de negro)

    Gracias!

  17. Mayra Falcón ha dicho
  18. Te envie una invitación para que puedas ingresar a mi blog.

  19. Mayra Falcón ha dicho
  20. Hola Eulalia! otra vez yo.
    Te cuento que he seguido buscando la manera de lograr lo que yo quiero y casi lo logro. En google he encontrado varias paginas, de las cuales esta: http://www.dbalfer.es/tip-css-pie-de-pagina-siempre-abajo , es la que pude entender, es que recién empiezo.

    Coloqué los códigos en el css en la plantilla, y el contenedor se mantuvo con su mismo ancho (no me importa al final si ocupa toda la pantalla o no en realidad), y abajo el footer se ubico pegado al navegador, como queria. No se si la imagen llegará a ocupar todo el ancho del blog como quisiera, es que lo dejé ahí porque me asusté al ver que el blog como que se rayó, por ejemplo, algunos textos del post-footer se movieron de lugar, y cuando abri el blog como "vista previa" se veía como si lo hubiera abierto como "ver el blog" (con imagen de las herramientas junto a cada gadget).

    Por qué pasaré eso?.

    Gracias!

  21. Mayra Falcón ha dicho
  22. Gracias Eulalia por responder!
    Hice lo que me dijiste pero no funcionó, sale un mensaje de error.
    Pero ahora he probado otra cosa y logré que el contenedor ocupe todo el ancho de la pantalla y que esté pegado al navegador, justo lo que quiero, pero nose si lo habré hecho de manera correcta. Esto es lo que hice:
    1.En #outer-wrapper { cambié width: 960px; por width: 100%;
    logrando así que el contenedor ocupe todo el ancho de la pantalla, pero el #content-wrapper { se pegó con todo y contenido a la izquierda.

    2.Así que puse debajo del #content-wrapper { , margin:0 auto 0px;
    y así se centro como estaba antes.

    Dime si hice lo correcto por fa.
    Gracias!

  23. laeulalia ha dicho
  24. Hola:
    Si, es correcto, pero para que esto sea perfecto deberías modificar tambien las medidas del main-wrapper y de la sidebar-wrapper, dándole, por ejemplo, 70% al main y 27% a la sidebar, de lo contrario quien vea el blog a toda pantalla en una como la mia, verá el main en una punta y la sidebar en la otra.
    Ese 3% que falta es el que se destina a distancias entre columnas.
    Hazlo y avisame, que mi pantalla es muy grande y te diré qué tal se ve.

  25. Mayra Falcón ha dicho
  26. Ya lo hice Eulalia! me dices como se ve.
    Pero una cosita mas, el #header-wrapper { y el #content-wrapper { tienen de ancho 960px , está bien así?.

  27. laeulalia ha dicho
  28. Pues no veo que haya cambiado nada.
    Creo que no me entendiste, y como la respuesta es muy larga voy a hacer una entrada en el manual para aclarar conceptos.

  29. MarlisMCash ha dicho
  30. Hola esta muy bonito su blog ,yo no se nada de esto y tengo un blog que quisiera que me dieras tu opinion a ver como lo arreglo mi blog es www.micafecitosaludable.com
    gracias por su atencion antisipada
    Marlis

  31. Eulalia ha dicho
  32. Marlish:
    Lo úncio que te aconsejaría es que no muestres tantas entradas a la vez, ya que tarda mucho en cargar.

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.