JMiur [E]

Dividir en columnas el pie de página de cada entrada no difiere demasiado de dividir el footer del blog en columnas y hay muchos modos distintos de conseguirlo sin enfermarse en el intento.

La clave es encontrar cuál es el DIV contenedor de todo eso y la mala costumbre de darle diferentes nombres en plantillas adaptadas de otros sistemas puede hacer de esto una tarea complicada para quien comienza. Así, en general, se encuentra dentro de:
<b:includable id='post' var='post'>
y por defecto, tiene este codigo:
<div class='post-footer'>
.......
</div>
Dentro de esto es probable que se vean otros sectores, que se mostrarán uno debajo del otro, diferentes cosas según sea nuestra configuración: nombre del autor, fecha de publicación, íconos para compartir, reacciones, etiquetas, etc.

Todo lo que allí está es opcional; pueden eliminarse cosas o agregarse otras sin restricciones y lo mejor, para probar, es agregarle otro footer y ver qué pasa y si eso que intentamos, realmente nos convence. En todo caso, luego, podemos mover el contenido a su nueva ubicación. Esa debería ser una regla básica: siempre, dentro de lo posible, lo mejor es no borrar nada hasta estar seguros.

Entonces, vamos a agregarle otro footer al que identificaremos con una clase CSS para poder darle las propiedades gráficas que nos gusten; en este caso, lo llamaré footerdemo pero, puede ser cualquier cosa.

Las propiedades las colocaremos siempre antes de </b:skin> y el HTML, justo antes del último </div> de ese includable:
    ... aquí el footer nuevo ...
</div>
</b:includable>

.footerdemo {background-color: #000; clear: both; float: left; margin: 20px 0; width: 100%;}
.footerdivs {padding: 10px;}

<div class="footerdemo">
<div class="footerdivs">
....... aquí irá el contenido .......
</div>
</div>
<div style="clear:both;"></div>
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Con esto no veré nada del otro mundo, sólo un rectángulo con la clase footerdemo he agregado otro con la clase footerdivs para evitar problemas y en ese agregué alguna clase de contenido.

Ahora, dividiré ese rectángulo en dos partes iguales, es decir, el ancho total (100%) lo distribuyo, un 50% para la izquierda y otro 50% para la derecha; eso, debo decírselo al navegador así que agrego otras dos divs con dos clases nuevas:
.fdizquierda {float: left; width: 50%;}
.fdderecha {float: right; width: 50%;}

<div class="footerdemo">
<div class="fdizquierda">
<div class="footerdivs">
....... aquí irá el contenido de la izquierda .......
</div>
</div>
<div class="fdderecha">
<div class="footerdivs">
....... aquí irá el contenido de la derecha .......
</div>
</div>
</div>
<div style="clear:both;"></div>
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Mientras mantenga mi aritmética aceitada, podría usar cualquier otra distribución 75% + 25% = 100%:

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Uno a la derecha y otro a la izquierda es fácil porque para eso está float. Ahora, le agregaremos un tercero; los dos extremos son iguales (100% / 3 es más o menos 33%) ¿y el central? a ese, no lo dimensiono en absoluto y le digo al navegador que se las arregle o hago lo mismo, coloco el ancho y lo centro con la propiedad margin:
.fdizquierda {float: left; width: 33%;}
.fdderecha {float: right; width:33%;}
.fdcentro {margin: 0 auto; width: 33%;}

<div class="footerdemo">
<div class="fdizquierda">
<div class="footerdivs">
....... aquí irá el contenido de la izquierda .......
</div>
</div>
<div class="fdderecha">
<div class="footerdivs">
....... aquí irá el contenido de la derecha .......
</div>
</div>
<div class="fdcentro">
....... aquí irá el contenido del centro .......
</div>
</div>
</div>
<div style="clear:both;"></div>
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Y lo haré, en ese orden, colocando el centro al final en el código HTML.

¿Quiero dividirlo en cuatro? También es posible, claro que, quedarán pequeños pero, el criterio es el mismo (100% / 4 =25%):
.fdizquierda1 {float: left; width: 25%;}
.fdizquierda2 {float: left; width: 25%;}
.fdderecha1 {float:right; width: 25%;}
.fdderecha2 {float: left; width: 25%;}

<div class="footerdemo">
<div class="fdizquierda1">
<div class="footerdivs">
....... aquí irá el contenido de la izquierda .......
</div>
</div>
<div class="fdizquierda2">
<div class="footerdivs">
....... aquí irá el contenido de la izquierda .......
</div>
</div>
<div class="fdderecha1">
<div class="footerdivs">
....... aquí irá el contenido de la derecha .......
</div>
</div>
<div class="fdderecha2">
<div class="footerdivs">
....... aquí irá el contenido de la derecha .......
</div>
</div>
</div>
<div style="clear:both;"></div>
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

22 comentarios:

Aretino  

Interesante. Me imagino que se puede justificar para que el texto no se vea centrado y si se le podrá incluir alguna imagen. Vamos a implementarlo a ver que tal nos va.

Responder
alfonso martínez  

Hola, que tal!!

Pues con todos mis respetos hacia tu paciencia me gustaría que me resolvieras una duda que me trae loco...

Es sobre el boton de "me gusta" de facebook, me funciona, pero solo se muestra una vez que entramos en un post concreto y no en los post en la página principal. Lo e probado de muchas formas, pero nada.

Confio en tus soluciones, ya me ayudaste en alguna cosa anteriormente.

Te dejo mi blog para que lo veas tu mismo. Gracias de antemano.

www.do-cumenta.blogspot.com

Responder
Gem@  

Muy buena explicación si señor, ya mismo te mando a alguien que preguntaba por añadir una cuarta columna :D

Responder
Gem@  

El buscador no termina de cargar nunca :S

Responder
JMiur  

Aretino:
Sí, claro. El contenido puede ser cualquier cosa.

alfonso:
No es algo que pueda verse online. Por lo que noto, el post-footer del home es diferente del post-footer de las páginas individuales. Es probable que haya algún código condicional que arme esa parte de manera diferenciada.

Gem@:
Tampoco se ven los avatares. Soy un pobre paria :(

Responder
Gem@  

El avatar ya se ve y el buscador funcionado, pero no recuerdo lo que vine a buscar antes jajajaja

Responder
JMiur  

Si. Por suerte ya lo arreglé aunque no sé muy bien como. Casi casi, como ese burro que tocó la flauta :-)

Responder
el Zambullista  

Si te acordás cómo arreglaste lo del buscador congelado en "Cargando...", ¿me avisás? Tengo el mismo problema, y me falta fe en los burros flautistas.

Responder
el Zambullista  

Lo raro es que en mi otro blog, acabo de comprobar, pasa lo mismo con el buscador. ¿Será Google? ¿Será Blogger? ¿Seré yyoo?

Responder
JMiur  

No pensaba publicarlo porque no estoy nada seguro del asunto y no entiendo el problema pero, prometo hacerlo mañana y ver si eso ayuda en algo.

Es una conspiración :-D

Responder
alfonso martínez  

Ok...gracias de todas formas JMiur, creo que tampoco me quitará el sueño, me doy cuenta que no es tan importante...creo que era solamente curiosidad por adentrarme en la entrañas de blogger...

Responder
Aretino  

Listo lo implemente y quedo mono

Responder
El Chueco  

Hola que tal saludos desde Mexico.
Bueno trate de dividir las columnas pero aun no se que me hace falta ya que me queda todo chueco y sobreensimado.
http://anispruebas.blogspot.com/2010/09/columna.html
A ver si me puedes apoyar Muchas gracias.

Responder
JMiur  

El Chueco:
Lo que pasa en tu ejemplo es que el DIV fdderecha está afuera del contenedor principal llamado footerdemo. Hay un &lt/div> mal colocado.

Responder
El Chueco  

Genial tenias razón ya quedo. Solo una pregunta como puedo hacer una linea horizontal de +- 10px de color rojo.
Saludos y gracias.

Responder
JMiur  

No sé dónde quieres esa línea. Puedes colocarle estilo a cualquier elemento con border-top o border.bottom

Responder
Joel  

Hola JMiur,

Me paso algo curioso al utilizar este metodo.
En mi pagina utilizo 3 columnas para el encabezado, pero tuve que poner una distribucion de 50-25-25, pues una de 60-20-20, me mandaba el header de la derecha hasta una segunda linea.
Curioso.
De todas maneras muchas gracias por tus aportes, tu página es una visita obligada cada día.

Responder
Somebody  

Hola como estas?
Te queria hacer una pregunta, como puedo hacer para dividir un gadget de mi sidebar, ya que vi en varios lugares como hacerlo pero en la mia no me sale ya que tengo dos (por lo menos en la plantilla aparecen dos) una dice "#sidebar-wrapper {" como es normal y la otra dice "#rsidebar-wrapper{" y cuando la divido se me va todo para abajo del los post. Y no se que hacer.
Me podrias dar una mano?
De aqui saque la plantilla y la puedes descargar y ver lo que digo.
http://www.plantillasbloggers.com/2011/02/genteen.html
Desde ya muchas gracias.

Responder
JMiur  

No sé a que te refieres con "dividir". La página que indicas de ejemplo es inaccesible.

Responder
Somebody  

Es que quiero poner dos publicidades una alado de la otra como vi en otras paginas, y no se como hacerlo para que queden juntas.
Es como vi en El Escaparate de Rosa:
http://elescaparatederosa.blogspot.com/2009/08/nueva-sidebar-dividida-en-dos.html
Pero no me sale con mi plantilla.

Y el link de la plantilla esta bueno, ami me funciona, pero aqui te dejo los links de descarga:
http://www.megaupload.com/?d=A2GZH1Y3

De vista previa:
http://genteen-demo.blogspot.com/

Muchas gracias por tu atencion. Un abrazo.

Responder
JMiur  

Para colocar un banner al lado del otro no hay ninguna necesidad de dividir la sidebar; basta colocarlos en un elemento HTML y colocarles alguna clase de estilo a cada uno, como float:right y float:left, o bien centrarlos, tal como se ve en el elemento HTML4 de esa página de ejemplo.

Lo de dividir la sidebar habría que verlo con cuidado y saber qué has hecho en concreto porque n ohay un método único y generalizado.

Responder
Javier Díaz  

Muchas gracias, lo cierto es que lo he utilizado muchas veces, debería pagarte un canon por utilización xD

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR