265

Añadir tres columnas en la sección del footer (pie del blog)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
[1] 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.

[2] 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:

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


[3] 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:

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

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

</div>


[4] 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;
}




Vista "editar"

Ejemplo uno



Vista "blog"

Ejemplo dos

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

[6] 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'
También podríamos prescindir de ella borrando la línea por completo.

Nota:
Consulta como modificar el diseño de las columnas con CSS

Entradas Relacionadas:

265 comentarios:

«El más antiguo   ‹Más antiguo   Total comentarios: 1 – 200 de 265   Más reciente›   El más reciente»
Fernando

Rosa
Discuple mi ignorancia.
Supongo q una vez puestas esas 3 columnas se pueden poner abajo si no lo desea, con tan solo mover los elementos verdad?

Asuknamun

Excelente Rosa, justo buscaba algo parecido, ya que he visto otros themes con esas propiedades pero son para wordpress, así que esto esta genial..¡¡

Gracias por compartirlo.

Asuknamun

Funcionando, pero me falta saber que pongo ahí ya que he probado algunas cosas y no me ha gustado mucho como ha quedado, pero de todos modos le encontraré una buena utilidad.

Haydee

¡¡Hola, Rosa!!

Verás, mi duda no tiene nada que ver en este post, pero te cuento mi problema:

He ensanchado la plantilla Thisaway blue siguiendo tus instrucciones de un anterior post, pero ahora quiero tener dos columnas en el blog, es decir, una a la derecha y otra a la izquierda.

Hice lo que tú dijiste para la plantilla Harbor, pero creo que con esta no sirve o quizá sea un poco torpe, de todas formas...¿¿puedes echarme una mano??

Mira, te dejo mi blog para q más o menos le eches un vistazo y me aconsejes... Muchas gracias ^^

http://haydeehell.blogspot.com/

Javier Cercas

Rosa, una pregunta: llevo las estadísticas de mi blog con StatCounter y tengo una duda:

Visitors Día 27
a) First: 10
b) Returning: 2
c) Unique: 12

Visitors Día 28
d) First: 15
e) Returning: 3
f) Unique: 18

Entiendo que d) son los que entran por primera vez en el día 28 y que, de esos 15, 3 vuelven a entrar en ese mismo día. También entiendo que el widget que aparece en mi sidebar el número que me da es c) + f), es decir, 30.

Me dice un amigo que First visitors indica los que entran en la página por primera vez en su vida, no en ese día; así, en esos dos días del ejemplo hubieran visitado el blog 25 personas distintas. Yo creo que esto no es así. ¿Me lo puedes confirmar?

A mi me gustaría tener el dato de visitantes distintos en una semana (creo que es la periodicidad normal de mirar un blog) pero sólo puedo saber lo que pasa cada día.

La Lletra Borda

Excelente explicación, de gran utilidad. Llevaba días dando vuelta a l tema y ¡zas!, nuestra querida Rosa lo describe con claridad. ¡Muchas gracias!

Palomas

Hola Rosi!!!, estuve 3 días tratando de organizar los links...código html, tablas...dije hoy voy para lo del Escaparate y lo he puesto. Mi plantilla es de Iván de Z. Cerebral y le he roto tanto la paciencia!!!. Gracias mi vida.

Fer

Hola Rosa, tengo una consulta y espero me puedas ayudar, mi blog fue suprimido por alguna "mano negra", he tratado de todas las maneras posibles de recuperarlo y no puedo, espero me ayudes. el nombre era http://mividaen20kg.blogspot.com/

Muhca sgrascias y espero una respuesta de ayuda

diperag

Buenas noches, Rosa !!
Quería sejerte un saludo y un millón de gracias por tu inestimable ayuada.

Saludos !!

Rosa

princesa, gracias por encontrar un ratillo siempre para comentar, eres un encanto ;-)

Rosa

Fernando, no entendí bien...
Una vez añadidas las columnas, estas funcionan como las sidebar, puedes colocar nuevos elementos en ellas o arrastrar los que ya tienes...

Rosa

asuknamun, me han llegado varios emails sobre como darles un aspecto más acorde con nuestro blog...
A la mayor brevedad que pueda subo una entrada sobre el tema.

Rosa

Haydee, he mirado en tu código fuente y no será demasiado complicado hacer lo que quieres para la Thisaway que estás usando...
¿Podrías mandarme un email? solo para obtener tu dirección de correo y poder enviarte la respuesta, sería demasiado largo por aquí...

Rosa

Javier, siento decirte que ignoro todo sobre ese tema...nunca he usado ni probado siquiera StatCounter.
Desde siempre estoy usando Google Analytics, te dan un script para colocar en el blog y así hacen un seguimiento exhaustivo de todas sus estadísticas que se consultan en su web facilmente.
Una vez que has colocado el código, tarda un poco en indexar los datos del blog, pero una vez lo ha hecho, sus estadísticas son increibles, de las más completas que he visto, con gráficas incluidas. Incluso puedes saber desde donde llegan tus visitas (país y web de origen), que navegador están usando, que palabras han puesto en Google para llegar a tu blog, el número de visitas por día, las páginas que más han visto...en fin, sin duda de lo más completo que hay en estadísticas.

https://www.google.com/analytics/home/

Rosa

la lletra borda ;-) :-)

Rosa

Palomas, seguro que Ivan te ha atendido encantado!
Gracias a ti!

Mar

Ah, me ha encantado esto Rosa!
Me llevo las instrucciones, veré si todo sale bien.
(Es que ya he tocado demasiado la plantilla sin hacer preguntas y aunque me gusta cómo han quedado los blogs...... están algo desconfigurados jeje.)

Al blog de pruebas.......primero!

Y de paso, un beso

Javier Cercas

gracias Rosa. Hace un par de semanas me di de alta en lo que dices y, en efecto, está muy bien. Ellos istinguen entre VISITAS y USUARIOS, que quizás es mas claro. LO que no facilitan es un widget que muestre en el blog el nº total de visitas.

Iván

Hola Rosa, ¿qué debo hacer si sólo quiero poner dos columnas?. Saludos guapa

((Marco))

Excelente. andaba buscando algo igual pero no lo encontraba, intentaba cambiar propiedades en el footer para que los elementos se ordenen horizontalmente pero no funciono, en cuanto tenga tiempo lo implemento a mi blog gracias!!

Rosa

Iván, omite la parte del código de la columna que no quieras colocar, por ejemplo, esta:

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

Aumenta los valores del width en las otras dos que dejas, para que ocupen todo el espacio del footer (si quieres, claro).

Rosa

Marco, espero que te vaya bien. :-)

La Blogueria

¡Gracias Rosa! Es muy interesante el poder modificar el mayor número de aspectos de la plantilla, y gracias a ello también la vamos conociendo mejor.

El footer es una zona inexplorada por mí. Hasta hoy no lo usaba, y hace un rato añadi un widget pues quiero experimentar con otros estilos de footer, darle otros usos aparte del copyleft.... ¡Esto me abre un montón de posibilidades más!

¡Qué oportuna es esta entrada para mí! ¡Abrazos!

Maestro

Esto también lo he puesto, Rosa. Mi "jesucrista" particular, jejeje

Antonio Herrera

Y el truco definitivo.

Funciona muy bien, como todas las utilidades del Escaparate que hasta ahora he ido usando.

Gracias de nuevo, y no sólo por las ayudas sino también por tu carácter didáctico.

En http://defotosyotros.blogspot.com

Me gustaría conocer tu opinión, si es posible.

Un saludo.

Rosa

Antonio, gracias por tus palabras.
Siempre pruebo cualquier cosa de las que publico, pero a veces, ya sabes, depende de la plantilla o de cualquier error puntual, no siempre obtenemos el resultado esperado.

He estado en tu blog y es una preciosidad ;-) volveré con más tiempo para "fisgar" más ampliamente, algunas de las fotos son preciosas, empezando por la del header y terminando por la del footer (la de la bici, ¡me encanta!)

Josep

Rosa: de nuevo solicitando ayuda:¿cómo puedo insertar una línea (doble, mejor) en el pie de cada entrada, para separarla mejor de las que preceden?

Gracias anticipadas.

Rosa

Josep, prueba esto a ver que tal...
Esta parte:
.post {
margin:0 0 2.5em;

}

Cambiala por esto:

.post {
margin:.2em 0 0.2em;
border-top: 1px solid #CC0000;
border-bottom: 1px solid #CC0000;
}

Fernando

Hola Rosa, esta vez es para ver si puedes mirar mi plantilla y decirme si se pueden poner, en otra que tengo de pruebas las he puesto sin problemas, pero en la buena no sale nada de lo que pones. Mira a ver y ya me comentaras si puedo o no. Siempre agradecido.

Rosa

Fernando, en el blog de pruebas te sale porque usas una plantilla original de Blogger supongo. La tuya no lo es. He intentado mirarlo en el código fuente pero no veo lo que necesito, necesitaría que me enviases la plantilla para verlo.

Fernando

¿Como te envio la plantilla?

Fernando

¿Recibiste mi plantilla? Ya no me acuerdo con que cuenta te la mande, con queenspain o con darveider, ya me diras.

Fernando

¿Recibiste mi plantilla? Ya no me acuerdo con que cuenta te la mande, con queenspain o con darveider, ya me diras.

Fernando

Y dale con pinchar dos veces, disculpas.

Fernando

Hola Rosa, el cansino otra vez, no se si te habra llegado mi plantilla o se te habra pasado, cuando tengas tiempo ya me diras si puedo poner las tres columnas y ya de paso, no puedo poner el leer mas en ninguna de las maneras que indicas. Gracias por todo y perdon por las molestias.
Pd. Por cierto he visto fotos de tu pueblo y es bonito de verdad.

Anónimo

Excelente consejo! La verdad es que sos una genia con esto. El blog cada vez me queda mejor gracias a tus ideas!
saludos!

Susana

Hola Rosa!!!
Me encantó este post ya que andaba buscando algo por el estilo, pero no lo puedo instalar en mi blog ya que me aparece un error que no sé cómo solucionar. Pero de hecho, en realidad, el widget del footer ya antes no funcionaba en esta plantilla que estoy usando y de hecho añadí cosas enla plantilla directamente pero hace poco me di cuenta que en el internet explorer se ve bien pero no así en Firefox. ¿Será posible pedirte que lo chequees y decirme cómo solucionar esto? www.mardesnudodeciudad.blogspot.com Dede ya muchísimas gracias y tu blog es una de mis referencias preferidas para cambios en mis diseños!!!
saludos

Susana

Hola Rosa!!!
Me encantó este post ya que andaba buscando algo por el estilo, pero no lo puedo instalar en mi blog ya que me aparece un error que no sé cómo solucionar. Pero de hecho, en realidad, el widget del footer ya antes no funcionaba en esta plantilla que estoy usando y de hecho añadí cosas enla plantilla directamente pero hace poco me di cuenta que en el internet explorer se ve bien pero no así en Firefox. ¿Será posible pedirte que lo chequees y decirme cómo solucionar esto? www.mardesnudodeciudad.blogspot.com Dede ya muchísimas gracias y tu blog es una de mis referencias preferidas para cambios en mis diseños!!!
saludos

Rosa

Susana, en el diseño de tu plantilla no está incluida la sección del footer, eso lo he podido comprobar a través de tu código fuente...pero no puedo ver mucho más...
Necesitaría que me enviases la plantilla por email, copiala y pegala en el blog de notas, por favor.

Susana

Rosa!!!!
Seguí todos tus pasos al pie de la letra y aunque costó: ME SALIO!!!!
Y pude dividir el footer como tan bien indicás aquí!!!!
No sé si está lindo, pero por lo menos quedó un poquito mejor de lo desordenado que tenía mi blog!!!
Muchas gracias y repito! gracias por tu tiempo y dedicación!!!!
saludos!!!

Rosa

Susana, al menos ya no se ve deformado :-) es una pena que con ese tipo de diseño no pueda hacerse mucho más...

tylelly

Hola Rosa: es la primera vez que entro en tu pagina y ya la he incorporado a favoritos.
Consulta: acabo de incorporar bajo tus indicaciones, las tres columnas el el pie de pagina, todo va bien, pero se me ha quedado los enlaces que he incorporado muy grande "desproporcionados" dime donde debo de cambiar esos tamaños para que no sean tan agresivos a la vista.
Mi blog si quieres echarle un vistazo y ver lo que te digo es http://tylelly.blogspot.com

Muchas gracias por todo

Rosa

tylelly, no hay nada en el código de las columnas que haga variar el tamaño del texto, así que el texto se adapta al tamaño marcado en el footer. Es en esta sección:
/* ----- FOOTER ----- */
donde has de revisar el tamaño del texto (font), que en tu plantilla está dado en porcentajes.

Tambíen podrías hacerlo en el CSS que añadiste antes para las columnas:
#footer-columna-contenedor {
clear:both;
font-size: 20px;
}

Cambias 20 por el tamaño que buscas...

tylelly

Gracias Rosa por la contestacion tan rapida a mi cuestion.

En CSS la he cambiado en dos medidas extremas 1 px y 100px y no he notado cambio.

con respecto a los porcentajes en /*-----FOOTER----*/, sere muy torpe pero no los veo

/* ----- FOOTER ----- */

#footer-wrapper {
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 1000px;
max-width: 1000px;
background: $footerbgColor;
border-top: 1px solid $footerBorderColor;
border-bottom: 1px solid $footerBorderColor;
}

#footer {
margin: 0px 0px 0px 0px;
padding: 10px 30px 10px 30px;
text-align: left;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.4em;
text-align: center;
}

#footer h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
color: $footerHeaderColor;
font: $footerHeaderFont;
}

#footer .widget {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.footer a {
color: $mainLinkColor;
}

Te repito las gracias.

Rosa

tylelly, perdona, no me había dado cuenta de que tu plantilla funciona con variables, yo cuando la miro lo hago a través de su código fuente, y ahí si se ve el tamaño de fuente.

La variable es font: $footerTextFont;
así que en "fuentes y colores" tienes que tener la posibilidad de controlar el tamaño del texto en el footer, de hecho, casi todo en tu plantilla se controla desde ahí, por eso no funcionaba en el CSS.

tylelly

Rosa, sigo con el mismo problema:

he intentado cambiar en "fuentes y colores" como me indicastes

"footer text font"
"footer header font"
"coment tex font"

Y la plantilla no se ha movido un apice.

Si estoy de pesado, perdona, y mmuchas gracias por tus rapidas respuestas.

Rosa

tylelly, pues lo siento, pero no se me ocurre nada más...en las plantillas originales de Blogger no hace falta nada más, el estilo de los widget que se colocan ahí es exactamente igual que los otros.
No entiendo porque no funciona en "fuentes y colores" y ni siquiera con el CSS, supongo que hay algo que se me escapa...algo en esa plantilla determinada, pero no doy con ello.

tylelly

De todas formas muchas gracias por la dedicacion.

Voy a dejar el resultado como esta, que aunque esteticamente no me gusta, queda mejor como lo tenia en un lateral.

Un fuerte abrazo.

Rosa

Tylelly, mira en esta entrada, tal vez te sea de ayuda, aunque no se si tu plantilla responderá...
Es lo que te comentaba antes del CSS, pero controlando columna por columna.

tylelly

Esteticamente se me ha quedado mejor, y lo que puedo cambiar sin problemas es la cabecera, pero el conjunto se me ha quedado igual.

De todas formas "chapeau" por tu trabajo, y ya te has ganado un enlace directo desde mi blog.:)))

Gracias

Rosa

Tylelly, pues muchas gracias, aunque no hacía falta de verdad, siento no haberte podido ayudar más en esto :-(

EL ADMINISTRADOR

oiga doña rosa, ke me tira el siguiente error :

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: The element type "div" must be terminated by the matching end-tag "
".

Rosa

EL ADMINISTRADOR , eso quiere decir que te falta un </div> de cierre en algún lado...

O lo has colocado mal, o se te olvidó copiar el último </div>

Felipe

Thak you so much

Ligia

Auxilio, Rosa!

Se dislocaron mis tres columnas del footer. Se ven en distintas posiciones.

Como las puedo arreglar?

Espero tus consejos....

Lia.

Rosa

Ligia, yo creo que es porque las tenías colocadas en mal lugar y antes no se notaba, pero algo has añadido o modificado y ahora se nota...tendrás que repasar los pasos para colocarlas, fijandote bien, algo no está donde debería, ya que se ven justo debajo del cuerpo de entradas...ahí no está el footer.

Ligia

Rosa:

...Y para seguir los pasos...tengo que quitar los elementos que he puesto; las fotos de lugares a visita?

Que buén lío tengo!!!

Rosa

Ligia, muevelos momentáneamente a tu sidebar.

Ligia

Uf!

Después de mucho mirar, mirar y mirar la plantilla encontré el problema...era que faltaba "clear:both;" no sé como lo habia borrado. Desde que lo puse todo volvió a la normalidad.

Aunque despacito...voy caminando...verdad?

Gracias por tu ayuda, Rosa querida.

Tu fan número 1.

Rosa

Ligia, que bien! :-L

Bardruck

buenisimo me encantó ya lo puse en mi blog

F ! X

Hola Rosa, estuve luchando por tener mis tres columans en el footer de mi blog, pero resulta que siempre me tiraba un error en "Text 2".

Mi contra es que yo no se inglés y mucho menos soy un experto en html, asi que de puro corajudo me puse a toquetear y termine haciendo lo mas sencillo, cambiar el "2" por el "3" y resultó!!!

:D

Gracias por tus datos, espero que mi pequeño aporte le sea util a aquellos que siguen luchando por sus 3 columnas!!!

Hasta la victoria, secrets!!!


Fix

Rosa

F ! X , claro, eso es porque ya tenía incluido en tu plantilla un elemento de testo con la id 2, has cambiado la id a 3 y ha funcionado porque no hay otro elemento texto con la id 3, si otra vez te pasa algo así, te da ese tipo de error con cualquier elemento, pones una id alta (20 por ejemplo) y sin problemas :D

Gracias por compartir!

Dreamer

¡Muchísimas gracias por todos tus trucos!

Me encanta tu blog, es genial.

Saludos desde Barcelona.

paqui

Rosa, gracias por el truqui, lo he colocado en mi blog y yo creo que ha ganado.
Besicos

Rosa

paqui, te ha quedado precioso, de verdad.

NerjaViva

Hola Rosa

Primero, muchas gracias por lo que haces y la manera de explicarlo. Te mereces una cuestación pública y que te regalemos una sesión de spa o, por lo menos, un par de cervecitas.

La pregunta:
He modificado la estructura de Rounders2 de acuerdo a las instrucciones que dices, añadiendo una tercera caja en la sidebar y dividiendo el footer en un 2+1.

Todo parece funcionar bien hasta que me he fijado que después del footer añade una linea que "corta" el efecto redondeado. ¿Se te ocurre que se me ha escapado?

El tester-blog es http://nerjaviva-prueba.blogspot.com y la plantilla está subida en http://nerjaviva.googlepages.com/template-7930268286621998888.xml

No espero nada, pero agradezco cualquier ayuda.

Un saludo

Rosa

NerjaViva , prueba eliminando los
<div style='clear:both;'/> del código.

NerjaViva

Gracias Rosa pero no ha funcionado así.
He sacado la base 2+1 del grupo de definiciones del footer original. Como las esquinas redondeadas no había manera (fácil) de "casarlas", he quitado las esquinas interiores y he dejado sólo las principales y he recortado el padding por abajo y ... parece que funciona.

Una última pregunta: en laeulalia viene un método para pasar las cosas de la plantilla viaje a la nueva sin perder (casi) nada, pero me lio: ¿tu has tratado ese tema?

un saludo

Rosa

Nerja Viva, pues me alegro que lo hayas solucionado. Yo cargué una plantilla con tus cambios y con solo retirar eso me funcionó...pero ya sabes como es esto de Blogger...

Sobre lo que dices de Eulalia, ella está en lo cierto, es un buen método, algo lioso de explicar pero así es como puede hacerse.
En Vagabundia creo recordar que hay también una entrada sobre el tema...

Omar y Ara...!!!

hola... me alegra el aporte como siempre....solo q en esta ocasion me ha quedado mal las proporciones.. las divisiones se colocan debajo del sidebar de la derecha y no hasta el footer.. ya ya le movi colocandolas a la izquierda, a la derecha al centro, le he movido al 20%, 30% y no me queda nada... t pido ayuda y muchas gracias

Rosa

Omar y Ara...!!!, pues he estado mirando en tu código fuente y todo parece estar colocado en su lugar correcto... no se que puede hacer que no quede bien...

Walter

Como hago`para ponerle en mi blog porque he buscado como hacerlo y no hay esa parte de codigo en mi plantilla

Rosa

Walter, tu plantilla no es original de Blogger así que no tiene ese código, es cierto.

Prueba colocando el código del paso [3] directamente después de:
<!-- end content-wrapper -->

Usa la vista previa antes de guardar nada, ya que no estoy segura de como quedará en esa plantilla.

Ana y bego

hola rosa que puedo hacer para que la triple footer me quede enmarcada

Rosa

Ana y bego, mira en esta entrada:

http://elescaparatederosa.blogspot.com/2008/01/modificar-las-columnas-del-post-footer.html?max-results

Rcontrol Peru Tv

Hola Rosa, ya me pasee por todo internet sin encontrar respuesta, quiero poner esas tres columnas pero no encuentro el código que indicas, ayudame porfa,,,,
te paso mi blog: http://rcontrolperu.blogspot.com/

werner

Rosa

Rcontrol, tendrá que haber algo como esto:

<div class='section' id='footer'>

Piensa que es casi al final de todo el código de la plantilla y que ha de tener id='footer'

Rcontrol Peru Tv

Gracias Rosa por contestarme,,, pero no, no hay ese codigo, es justo el problema,,,,
solo encontre algo como esto que es lo que mas se asemeja casi al final de mi platilla
b:section id='footer'.....

saludos
werner

Rosa

Rcontrol Peru Tv , prueba sustituyendo eso que dices por el código, usa siempre vista previa.

Birdelo

Hola Rosa.

Excelente, me ha quedado muy bien, ya estoy empezando a trabajar muy bien con mi plantilla que me quiero crear propia.

Me verás mucho por acá Ro...

Saludos!!!.

Rosa

Birdelo, pues estaré encantada de verte por aquí :-L

Y, por supuesto, me encantará ver ese trabajo que estés haciendo en cuanto acabes.

Alicia

Hola Rosa... queria preguntarte como hago para tener separadas las columnas del footer. las tengo y realmente son muy buenas,pero deseo separarlas un poco...

Rosa

Alicia, lo mejor es usar algo de código CSS:
http://elescaparatederosa.blogspot.com/2008/01/modificar-las-columnas-del-post-footer.html

Alicia

gracias rosa n.n

Birdelo

Hola Ro.

Me ha quedado expectacular.

Pero ya comienza un pequeño inconveniente. He estado modificandolo para ponerle una imagen de fondo y eso.

Pero resulta que ahora he quitado, son querer, el footer de abajo, que traen por defecto las plantillas de Blogger!.

Espero que me puedas ayudar. Un abrazo!!!.

Rosa

Birdelo, supongo entonces que lo que te falta es esto, que es lo que estaría después de la línea que incluí, supongo también que al eliminar la línea, lo has borrado:
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>

Fijate en el código de la entrada para poder colocarlo en el sitio correcto.

Lady Ruth =)

Mas que azul me parece como moradito jeje, en mi caso la puse de color negro, gracias rosa ha quedado super bien, incluso mejoro un problemilla que tenia, saludos cordiales desde coah. mexico :D

Rosa

Lady Ruth =) ¡Me alegra mucho leer eso!:-)

Birdelo

Hola de nuevo...

Muchas gracias por todo Ro!.

Ya he terminado y me ha quedado mas o menos bien la plantilla que he creado. Un abrazo fuerteee por toda la ayuda brindada!!!.

Rosa

Birdelo, está genial!
Otro día te dejaré un comentario, hoy iba "como loca" solo pude echar una miradita por encima...

Birdelo

Ok amiga.

No importa, solo con que hayas ido a ver me basta, hehehe, ahora veo si le doy un toquecito a este footer!!!.

Portate mal!!!.

Posd: No sabia la existencia de Eternamente cabreada, me ha gustado un monton...

Rosa

Birdelo, lo haré, lo haré :-) muy pero que muy mal.

Birdelo

Ok, hehehe, ;)

Anónimo

ok....gracias por tu ayuda

GAEL

Hola Rosa, antes de todo felicitarte por el blog y la ayuda que nos brindas, bueno resulta que las tres columnas se ven bien en mi ordenador pero cuando es visto desde otra computadora la columna de la derecha se cae, he intentado poner el ancho en px pero igual, por mas que le busco la medida exacta sigue viendose mal en otros ordenadores

Rosa

GAEL, no puedo verlo claramente a través de tu código fuente, pero el footer no se queda centrado, "flota" hacia la izquierda...

Creo que has colocado el final del código de las columnas después de <div style='clear:both;'></div> y ha de estar antes...es lo que me parece a través del código que puedo ver online...

GAEL

hola Rosa, antes de todo desearte un feliz año 2009, que este año todos tus deseos se cumplan y sea mejor, mucho mejor que el anterior...
bueno queria contarte que siguo teniendo el mismo problema, hize lo que me sugeriste,pero igual, trate modificando el css y nada no queda nada bien, hasta parece peor y lo peor es que por estos dias no dispongo de mucho tiempo, gracias de antemano por cualquier ayuda que puedas brindarme y nuevamente feliz año...

Rosa

GAEL, algún error hay que no puedo ver online.
Enviame la plantilla por email si eres tan amable.

RRS

Hola Rosa, puse las 3 columnas y quedo bien pero con la novedad que la imagen de fondo de la plantilla en el pie del blog como azul oscura ya no aparece o no se expande me puedes ayudar porfa, mi blog es www.promoydescuentos.blogspot.com gracias por tu ayuda.

Rosa

RSS, localiza esto en tu plantilla:
#footer-wrapper {
padding-top: 15px;
background: url(http://img524.imageshack.us/img524/5626/barrapiete3.gif)no-repeat ;
clear: both;
}

Y añade el color de fondo justo después de background, así:
#footer-wrapper {
padding-top: 15px;
background:#1F3F63 url(http://img524.imageshack.us/img524/5626/barrapiete3.gif)no-repeat ;
clear: both;
}

RRS

Gracias Rosa, pero ahora tengo 2 lios mas derivados de este jaja.. el margen quedo muy pegado en la 1ra columna y el color del titulo quedo igual que el fondo, como puedo cambiar el color a los 3 titulos de las columnas. Gracias.

Rosa

RRS, localiza el CSS de tus columnas:
#footer-columna-contenedor {
clear:both;
}
.footer-columna {
padding: 10px;
}

Y cambialo así:
#footer-columna-contenedor {
color:#fff;
clear:both;
padding-left: 20px;
}
.footer-columna {
padding: 10px;
}

RRS

Rosa. como siempre MUCHAS GRACIAS!. He aplicado muchos de tus trucos y lo seguire haciendo. Grtacias por dedicarnos parte de tu tiempo.

Wakinnebis

Rosa, te madno este primer comentario para decirte que me ha servido de mucha ayuda para dejar mi blog, cada vez mas, a mi gusto.
Gracias. Espero seguir visitando el blog muy a menudo.

Rosa

Portu, el código está correcto...

Pienso que puede ser la forma de "marcar" los datos añadidos, usas estos símbolos <!-- y --> en el CSS y lo más extraño es que hayas podido guardar la plantilla, ya que esos símbolos son para el html no pueden usarse en el CSS.

No estoy segura que sea por eso, pero otra cosa incorrecta no veo online.
En el CSS las "marcas" se colocan así:

/*fin tres columnas al final ------------- */

En cuanto a los reproductores, pues no tengo idea porque Firefox no respeta el false...en otras versiones lo hacia...tendrás que usar otro tipo de reproductor.

Portu

Muchas gracias por tu brevedad al contestarme Rosa. ^^ Puede ser que hayas visto que estaba haciendo modificaciones desastrosas. XD Pero bueno, veré que puedo hacer y ya te comunico.
Gracias ^^

Portu

Hola de nuevo Rosa, he estado pensando, y para mejorar el aspecto de mi blog quería saber que tengo que hacer para poner, una vez que tenemos las tres columnas iguales (tal y como tu nos las has dejado), poner la que está debajo igual que estas tres.

Gracias ^^

Pd: He estado intentándolo, pero soy un poco negado para estas cosas. :P

Rosa

Portu, esta parte del código es la de la sección que está debajo de las columnas:
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>

Tendrías que sustituir eso por las secciones de las columnas, es decir, desde <div id='footer-columna-contenedor'> hasta el primer
<div style='clear:both;'/> pero cambiando los id, o sea, sería por ejemplo <div id='footer-columna-contenedor2'>
y cada columna col4, col5...

Portu

¡¡Perfecto!! Muchas gracias de nuevo Rosa. ;)

Rosa

veinteañera, elimina una de las secciones, por ejemplo esta:
<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>

Y cambia el tamaño de las otras (width: ) según necesites.

veinteañera

perfecto Rosa!

Mil gracias y perdona por el mareo con el footer!!

MARGA'S HAPPY PATCHWORK

Hola Rosa, tengo puesto el footer asi en tres columnas, pero me gustaria poder separar algunos elementos con una raya igual que la que pusimos en este articulo, pero de tal manera que en ambos lados de la raya pueda seguir poniendo gadgets.
Vaya, como si pusiera otra footer nuevo con tres columnas.
Gracias por tu paciencia.

Rosa

MARGA, mira el comentario 113.

También te recomiendo no pasarte añadiendo este tipo de secciones...ralentizará la carga del blog si abusas de ellas.

Yhonny E

hola..aja.ya estoy practico en este truco..peor no me gsta el color azul claro apra la barra de estos widgets...me gustaria cambiarles el color..es posible?

CDLR007

hola rosa como estas, mi pregunta no tiene que ver con agrgar el footer ni nada de eso, lo que pasa es que estoy utilizando una plantilla que no es original de blogger, entonces ella se muestra los accesos deedicion rapida, y yo no qiero que lo haga, trate de quitarselos en la configuracion y esas cosas pero auin asi me siguen apareciendo. si me puedes decir como lo quito te lo agradesco

Rosa

CDLR007 No tiene nada que ver con la plantilla.
Si has marcado la opción para que no se vean en "Configuracion" y aún se siguen viendo, no podemos hacer nada, ho hay acceso del usuario a esa función.

De todos modos, no veo el problema, ya que las visitas que acceden a tu blog no los ven, solo tu los ves y siempre que estés logueado en Blogger, si no tampoco los verás.

Afirmando mis Pasos

Hola Rosa.una rpegunta.si quisiera solo usar dos columnas de widgets debajo de las entradas.que parte de el codigo deberia modificar o quitar?..gracias..buen dia!

Rosa

Afirmando Tendrías que dejar algo así:

<div id='footer-columna-contenedor'>

<div id='footer2' style='width: 50%; 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: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

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

</div>

Hijo De Judas

Hola Rosa, yo otra vez :)

Desde que conocí tu blog me lo paso mirando algun detallito que colocar a mi blog (todos antes pasan por mi blog de prueba).

En este caso, probé lo que dices y quedó muy bien aunque tengo dos dudas que ojalá pudieses satisfacer.

1º: que es el CSS? disculpa mi ignorancia, pero la verdad quedé hasta el punto 3 de tu explicación y me bastó. Me gustaría saber para qué sirve exactamente el paso 4 en cuestion.

2º: una vez realizado el cambio (pretendo simplemente desplazar cosas de la sidebar a mis nuevas 3 columnas), cómo puedo deshacer lo realizado? es que acaso es obligatorio guardad mi plantilla cada vez que haga un nuevo cambio?

Un abrazo Rosa, las palabras sobran con tu blog. Simplemente sorprendente.
Muy agradecido, de antemano, muy buena suerte!

Rosa

Hijo de Judas ¡Siempre un blog de pruebas! así es mucho más seguro probar cualquier cosa:D

El CSS nos permite mostrar el diseño del blog tal como queremos, en este ejemplo a ti te parece que no es necesario porque los cambios que puse en el, son tan mínimos que no se aprecian casi.

Mira, para que te hagas una idea, te diré que el footer de mi blog lleva este truco, tal cual tu lo has añadido...¿cual es la diferencia entonces? ni más ni menos que el CSS, que me ha permitido añadir un color de fondo, unas distancias adecuadas entre elementos, un color de texto distinto al resto del blog....entiendes ahora, el CSS lo es todo en un blog.

Puedes deshacer cualquier cambio en la plantilla en el enlace que ves debajo de donde está todo su código y que dice:
Restablecer plantillas de artilugios a los valores predeterminados

Manolo

Hola Rosa, buenas tardes, como siempre me ha servido mucho este tip, fíjate que yo le puse solo 2 columnas y me funcionó perfecto, solo tengo un pequeño detalle, que ya le he tratado de arreglar pero sin éxito. Resulta que los encabezados de las dos columnas difieren de las que tengo en la parte izquierda de mi plantilla, me salen letras grandes y no me sale el encabezado de la figurilla de fondo de los widgets. Espero haberme explicado, de todas formas te dejo una liga a una imagen que edité para que lo cheques y la liga a mi blog, desde ya, un gracias y un abrazo.
Imagen
Enlace al Blog de Manolo

Rosa

Manolo Pues te guías por esta entrada:
http://elescaparatederosa.blogspot.com/2008/01/modificar-las-columnas-del-post-footer.html

Y al añadir los valores necesarios para controlar las nuevas columnas te los copias o te guías por los que en tu blog tiene el título de la sidebar: #sidebar-wrapper h2 {

MALINA

Rosa me ayudas a ponerle un poco de css, lo estoy intentando por mi cuenta pero no lo consigo.

por ejemplo quiero poner los titulos de los widgets con un color background y definir el color de la fuente.

intento algo asi pero no va

#footer-columna-contenedor .h2{

algo estoy haciendo mal, eso es seguro ¬¬

Rosa

MALINA ¿Has visto esta entrada?:
http://elescaparatederosa.blogspot.com/2008/01/modificar-las-columnas-del-post-footer.html

MALINA

ya ta! rapido pronto le dijo la tonta al tonto! :)
que gusto, para otra vez te pregunto primero, jajaja

Gracias tesorote!

Muaaaaaa

Manolo

Muchas gracias,nuevamente me has ayudado enormemente. Un abrazo enorme.

El blog de Manolo

Bulma

Lo puse y salio bien, gracias Rosa :)

Rosa

yosurvivor Guiándome por lo que veo a través de tu código fuente, voy a indicarte como creo yo que te quedará bien en tu blog ¿ok?

Localiza esto (no hace falta expandir artilugios) casi al final del código de tu plantilla:
<div id='bgbottom'>

Y justo encima de esa línea pegas esto:
<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;'/>

Sirkan

Hola!!
Gracias por la footer!

Pero tengo una duda... nose si ya estara puesto como se hacer pero no lo encuentro... :$

Como agrando la letra del titulo(porque cuando lo hice agrande toda la de la sidebar :S), cambiarle el color, el tipo de fuente y centrarlo. (obviamente todo a los titulos :D)

Aunque son hartas cosas demas que son con unos pasos super cortos pero que no se hacer...
Asique por eso pregunto como se hace ;)

Gracias!

Rosa

Sirkan Supongo que hablas de los títulos de las columnas del footer ¿no? Mira aquí:
http://elescaparatederosa.blogspot.com/2008/01/modificar-las-columnas-del-post-footer.html

Eroz

Hola Rosa Buenos dias =)

Una pregunta ¿Como puedo quitarle las bolitas que salen junto a los links en las columnas?

Rosa

Eroz No veo tu blog...depende de donde esté añadido el código te contestaría, pero no puedo sin verlo...:S

Sirkan

Ahh Gracias!
lo voy a probar a ver como me va! :D

y gracias por responder tan rapido!

Eroz

Rosa muchas gracias por contestarme, ando aqui solo para decirte que lo resolvi buscando los codigos posibles (cuando se me mete una idea hasta que doy no estoy tranquilo jajajaa)

solo le puse esto en el css

ol, ul {
list-style: none;
}

Respecto a mi blog pues es que aun no lo abro aun estoy en el diseño y ya sabras jajaaja que si me gusta de una forma y luego ya se me ocurrio otra y despues vi algo mas en otro lado que me gustaria entonces nomas no quedo del todo agusto.

Sinceramente me daria verguenza que veas el desastre de plantilla que tengo, cuando termine te lo vendre a enseñar ya que me encantaria saber tu opinion.

Mil gracias por todas tus atenciones =)

Rosa

Eroz Tranquilo :) ya la veré entonces...

Global Metion Blog

A mi ese código no me sale Rosa :(

Rosa

Global ¿Y qué problema tienes? Porque esto no es ningún script ni ningún "truco" es simple código html que funciona en todas las plantillas si se coloca bien...

Global Metion Blog

si eso lo sé Rosa pero si el código que tu estas dando para sustituir no aparece, en la plantilla que hago ?

no esta ni exapandiendo ni mucho menos sin expandir

Rosa

Global Ay, perdóname :$ a veces es que parezco tonta, je,je...dime para cual de tus blogs es y miro a ver el código que tienes que buscar...

Global Metion Blog

perdonada, no te llames así, jaja, eres un angel caído de el cielo blogger, para ayudar a los igno... como yo :P http://globalmention.blogspot.com siempre trabajando con el principal los otros son de mi equipo

Rosa

Global ¿Como que no tienes el código? Yo lo veo en tu código fuente, o sea, que está:
<!-- end content-wrapper -->
<div id='footer-wrapper'>
<div class='footer section' id='footer'>

Amador López Criado

Otra cosita que he añadido a mi blog. De nuevo agradecido.

Global Metion Blog

Rosa y para cambiar el texto? por fa ayuda jaja
PD: Por fin lo logré

Rosa

Global En esta entrada puedes ver como cambiar el diseño de las columnas:
http://elescaparatederosa.blogspot.com/2008/01/modificar-las-columnas-del-post-footer.html

Lille Skvat

Gracias como siempre, Rosa :-)

Saludos

Lille Skvat
http://lilleskvat.blogspot.com

Céz

Si!!! me funciono ese código, absolutamente fácil. Gracias Rosa!

PD. Ahora veo que es posible personalizar el footer con el comentario 150. Voy a ver como lo haré (cruzo los dedos jejeje) :D

Rosa

Céz Seguro que te queda genial ;)

Céz

Si, muchas gracias! ahora mi footer ya no desentona con el resto del blog como antes, así que lo estoy rediseñando mediante ccs.

PD. Espero que hayas tenido un excelente fin de semana. :D

Mary Lovecraft

Hola Rosita Linda!

Algo así andaba buscando sí señora! pero además necesito saber cómo eliminar totalmente la sidebar por defecto quiero decir, que la plantilla tuviese sólo estas 3 columnas, puestas en el footer ¡es justo lo que me apetecía experimentar y diseñar ahora!

¿cómo le hago para elimanar la sidebar por defecto?? (que luego ya le coloco yo las 3 al footer)

un beso y gracias de antemano por tu explicación!

Rosa

Mary Lovecraft Si fuese para uso propio te diría que la "ocultases" a lo vista, pero como supongo que es para una plantilla de las que luego ofrecerás para descarga, lo mejor es que elimines todo rastro de la sidebar.

Localiza este código en tu plantilla sin expandir elementos; suponiendo que no tienes ningun gadget añadido en ella lo verás así:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</div>

Lo borras y ya está.
Aunque si quieres puedes eliminar la parte del CSS también, ya sabes todo lo de #sidebar-wrapper { y lo que hay en /* Sidebar Content
eliminar lo innecesario siempre aligera la carga del blog...

Mary Lovecraft

Muchísimas gracias Rosita Linda!

sí, es para diseñar plantillas de este tipo (que me gustan mucho) y ofrecerlas en descarga por supuesto.

¿sabes? en un primer momento pensé en lo de 'ocultar' y añadir las tres columnas al footer como tan bien explicas acá pero luego pensé que me gustaría hacerlo bien (¡soy muy tiquismiquis! me parece que ya te lo dije alguna vez) y claro, preferí preguntarte antes de hacer nada.

muchas gracias de nuevo Rosita Linda, eres un amor voy a probarlo a la voz de ya!
:***

El Pape

hola Rosa. He implementado esto en mi blog ( www.vinilosrock.blogspot.com ) y funciona ok pero quisiera saber como puedo separar cada uno de los gadjet que agrego con una línea ploma, al igual como está en la barra lateral.

Espero me hayas entendido

Bueno, eso, gracias

Rosa

El Pape Prueba colocando esto en el CSS:

.footer-wrapper .widget {
border-bottom:1px dotted #333333;
}

El Pape

disculpa Rosa, ¿en que parte del código de este truco tengo que colocar el código que escribiste???

Viviana y Sofia

Rosa

no se si es mi template pero ni siquiera puedo empezar con esto porque ese codigo no aparece en mi plantilla.

el blog de prueba es: http://mamasybebe.blogspot.com

gracias!!

Rosa

El Pape En el CSS, es decir, donde quieras siempre que esté antes de ]]></b:skin>

Rosa

Viviana y Sofia Así es, en el diseño de tu plantilla no está contemplado el footer...

Intenta colocando el código del paso [3] directamente sobre:
<!-- end content-wrapper -->

Viviana y Sofia

no quedo bien...




quedo maravilloso !!!!!!
http://mamasybebe.blogspot.com/


lo unico es que se ven con fondo marron y no blanco... que codigo deberia tocar??

gracias y mil gracias

Rosa

Viviana y Sofia Mira en esta entrada a ver si te sirve, sino me cuentas...:
http://elescaparatederosa.blogspot.com/2008/01/modificar-las-columnas-del-post-footer.html

Viviana y Sofia

Gracias Rosa... pero con ayuda del Notepad++ encontre el colorlo modifique

Gracias!!!

Mauricio

Hola Rosa gusto de saludarte,quiero agregar columnas al footer, pero resulta que a mi no me aparece (footer wraper)me dice(crosscol wraper o la otra main wraper)dime cual tengo que eliminar para las columnas en el footer.Gracias Guapa.

Rosa

Mauricio Mira en uno de los comentarios anteriores, el número 163 creo que es...

Mauricio

Hola Rosa, mira he hecho lo del texto 163 y se ha quedao arriba y no en el pie de página dime ahora como lo bajo al pie de página el paso tres lo he puesto a continuación del (content wrapper)dime algo, gracias Rosa.

Rosa

Mauricio En el comentario que te dije, no dice nada de content-wrapper...olvidate de eso, tu no tienes footer-wrapper así que no puedes hacerlo colocando el código donde indico...

Quita todo de donde lo has puesto y colocalo donde digo en ese comentario, es decir, sobre <!-- end content-wrapper -->

Tal como lo ves escrito aquí, es eso lo que has de buscar, esa línea exactamente y colocar el código antes de ella.

Mauricio

Hola Rosa ya está me ha quedao bien,Gracias nuevamente por tú consejo.

Viviana y Sofia

http://mamasybebesblog.blogspot.com

Ahi lo aplique con buen resultado, salvo por el fondo,,, como hago para que se vea blanco?

Gracias Rosa, besos

Viviana y Sofia

http://elescaparatederosa.blogspot.com/2008/01/modificar-las-columnas-del-post-footer.html

Ahi lo resolvi, solo me voy a dedicar a adecuarlo a mi blog

te quiero rosa!!!!!!!!!!!!

Siervo

Otra vez Rosa, recurriendo a tu ingenio y conocimientos, deseo consultarte.
Mira ya hice todos los pasos, y todo quedo ok, es decir guarde cambio y me lo acepto, pero cuando ilusionado yo fui haber en elementos de pagina, sorpresa, sopresa no habia nada, que trauma senti al sentir desaparecer mis ideas que estaban destinado para ese sitio (footer) please ayudame, creo que hay un codigo que esta alli siempre y no sale, algo asi como la direccion del blog de donde baje la plantilla, por favor espero su ayuda y ojala no escuche cambia de plantilla, gracias..

Rosa

Siervo En tu plantilla veo esta línea sobre el código que has colocado:

<div id='footer-wrapper' style='display:none'>

Para que se vea, tendría que estar así esa línea:
<div id='footer-wrapper'>

Siervo

Jejejeje eso era todo, mira Tu, si hasta las cosas mas simples lo haces, me imagino creandote imagenes y propiedades para el blog, realmente me sorprendes....

Bulma

Rosa ya estoy aquí otra vez dando la lata :p
se puede añadir footer en una plantilla? la que usamos en el blog de la peña no tiene.

Rosa

BulmaSuele ser posible, aunque depende lo complicado del diseño de la plantilla...si me dices para que blog es, podría mirarlo.

Bulma

Rosa es para este, creo que la plantilla es la herbert.
Gracias por todo.

http://laconyalleida.blogspot.com/

Rosa

Bulma Antes de ]]></b:skin> colocas esto:
/* Footer
------------- */
#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Luego casi al final de la plantilla localizas esto:

</div></div> <!-- end outer-wrapper -->

Sobre eso, pegas este código:

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

Si todo ha ido bien, ya deberías tener footer.

Penya la Conya

:)Rosa eres un sol, ya tengo footer muchisimas gracias por tu ayuda incondicional y tu paciencia..

Bulma

Rosa

Bulma ¡Eso si es rapidez! :O

Un Perro

Hola Rosa, por trigésima octava vez :S :S
yo me meto en cada una !! Bueno que ahora tocando un poco el footer con estas tres columnas, se me han quedado afuera del margen unas fotos, en la columna izquierda, la de la derecha la pude arreglar con un "width:288px;" pero al añadir esta medida a la izquierda, queda superpuesta con la columna central, probé con padding y margin, respecto de la central, sin resultado.
Noto que hay una distancia con respecto del margen izquierdo del blog y el footer, que es de mayor distancia que el derecho, quizás ahí radique el problema de este embrollo en el que me metí.
(para variar sigo sumando embrollos)
Yo creo que de tejedor a mano me muero de hambre, con los enredos que me armo !!

Un beso grande Rosa

Un Perro

Rosa, he dejado de lado la idea, volví a la normalidad las columnas y todo quedo como antes, funciona bien, solo debo modificar la medida de lo que vaya a agregar en base al ancho de columna.

En cambio dada mi curiosidad, me metí en armar otro footer por debajo del ya creado, pero con dos columnas, y funciono, añadiendo a los id de la anterior un Nº 2 para que no existan conflictos y eliminando una de las columnas
esto me da mas libertad, espacio y mejor distribución de los widgets en base a la idea que tenia para el footer.
lo que no llego a entender es por que el segundo footer de 2 columnas ocupa todo el ancho del blog y el primero no...(?)
te dejo el blog de pruebas.
PRUEBA
(la hora que es y yo sigo metido entre Css, como sera que ya hasta figuro en los comentarista !! por dios !!)
un beso grande Rosa

Rosa

Un perro Yo lo veo bien... no noto esa "distancia mayor" que dices... Creo que es una apreciación óptica.
En estos casos yo uso un sistema de comprobación casero :D añado a #outer-wrapper { un borde border:1px solid #fff; y uso vista previa para comprobar las medidas, luego NO guardo los cambios...

Rosa

Un perro Eso es porque el segundo bloque de columnas lo has puesto fuera del footer-wrapper y entonces toma la medida de la pantalla.
El primero lo hemos incluido dentro del footer-wrapper con lo que toma sus medidas (width: 900px).
Si retiras el footer-wrapper tomará todo el ancho.

Siervo

Rosa una consulta, abra forma de que las letras de footer antiguo se vean como se escribe, ejemplo:
En el gadget como titulo pongo "Juan", pero cuando guardo, voy a haber y aparece "juan", quisiera ver si tienes forma de poder hacer que se respete la forma como se escribe en el gadget. Gracias de antemano.
http://fulladven.blogspot.com

Siervo

Ya que vas a leer el mensaje, te quisiera hacer una consulta dime hahy forma de que el formulario de comentarios sean del mismo tamaño, se que viendo la pagina me entenderas a que me refiero.

Rosa

Siervo Localiza esta línea en el codigo que has puesto para las columnas del footer:

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

Cambia donde dice text-transform: lowercase; por text-transform: none;

En cuanto al formulario, tendrás que probar el el CSS que añadiste para el cambiando el valor en width hasta ajustarlo con el mensaje de arriba.

Viviana y Sofia

Bella Rosa... y si quiero eliminar estas 3 columnas ?? solo me limito a borrar todo lo que agregue? o hay que hacer algo mas?

Gracias!

Rosa

Viviana y Sofia Exactamente! :D

Javier Medina

Hola Rosa, hice esto en mi blog http://tenisentv.blogspot.com , (que por cierto te invito a que conozcas) , e implemente las 3 columnas en el footer (todo bien) Pero... ¿habria alguna forma de que no salieran las letras en minúsculas todo el rato? (Alomejor modificando "lowercase") y, podría ponerlo "Alineado a la derecha" en vez de centrado todo el rato. ¿Que tendría que modificar? Espero tu respuesta impaciente. Enhorabuena y felicidades por este blog Rosa!!!

Rosa

Javier Medina ¡Eso es! en la línea que controla cada columna:
style='text-align: center; padding: 10px; text-transform: lowercase;

Cambias lowercase por normal

Y el text-align: center por text-align: right

Javier Medina

Gracias Rosa!!! Ya lo hice, parece que ya le voy cogiendo el truquillo :D !!! Lo que me pasa ahora es que en mi portátil la 3ª columna de la derecha me sale como más abajo, con un espacio sin utilizar (Ver foto) Hay alguna solucion? , porque en otro ordenador si sale bien. Bueno, espero tu respuesta. Un saludo!!!

Rosa

Javier Medina Reduce el ancho de una de las columnas, por ejemplo la del medio para que sean las tres del mismo ancho.
En esta línea:
div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'

Cambia 40% por 30% a ver si se soluciona solo con eso...

Anibal

Que tal Rosa, primero agradecerte lo de la otra entrada de las imagenes que aparecen, mañana me pongo en ello. Lo que me tiene con una gran duda es acerca de dónde le cambio el color al fondo del footer, tal y como tu lo tienes, ya que divide claramente las entradas de esa sección, y acabo de dividir esta parte también en 3 secciones.

Muchas Gracias.
Saludos!

Rosa

Anibal Lo harías en el CSS, concretamente en #footer-wrapper

Pegasus

Hola Rosa, como estas? disculpa las molestias pero tengo el problema del comentario 54. He realizado lo que indicas en el comentario 55, pero no funciona. Me continua saliendo el mismo error
" 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: The element type "div" must be terminated by the matching end-tag ".

Porfa tu ayuda urgente.

Rosa

Pegasus Es difícil ayudar en este caso...yo no puedo ver el error, así que lo único que puedo decirte es que hay un <div> que sobra, que falta o que está en mal lugar :S

Pegasus

Hola Rosa, gracias por contestarme, te cuento que despues de darle mas vueltas al asunto lo acabo de solucionar, el problema era que tenía que eliminar dos artilugios.
Despues de eliminados funcionó el código.

Mil gracias

Rosa

Pegasus Me alegro... pero no se que tienen que ver los artilugios con el error del <div>... :o

FrAnKo

ola k tal kien me puede ayudar
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: The element type "div" must be terminated by the matching end-tag "
kisiera k me ayuden please eso me sale al pone el texto grande de la columna contendenedor

Rosa

FrAnKo Una vez colocado el código, prueba a eliminar el </div> del final.

Susana

Hola Rosa. Hoy me comentaron que mis 3 columnas que puse en el footer no se ven bien con IE, la de la derecha aparece desplazada hacia abajo.
Yo siempre uso Firefox y no lo había detectado. Me fuí a verlo al IE y además encontré otro problema, en una de las listlink de la sidebar. Puse iconos antes de cada enlace tal y como indicas, pero en los link que ocupan mas de una linea el icono desaparece.
¿Se te ocurre alguna forma de arreglarlo para que se vean bien tanto el IE como en Firefox?
Aprovecho para decirte que puse un minimenú en el que te enlacé para agradecerte toda tu ayuda........y porque te lo mereces.

Rosa

Susana Reduce un poco el ancho de alguna de las columnas, por ejemplo la del medio que es mayor, cambiando width: 40%; por width: 30%; a ver si se resuelve así.

En cuanto a los link, normal, el icono sale delante de la línea de comienzo del enlace, no en cada párrafo.

«El más antiguo   ‹Más antiguo   Total comentarios: 1 – 200 de 265   Más reciente›   El más reciente»

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S