Para añadir 3 columnas a pie de página (footer) debemos seguir los siguientes pasos:
1) Vamos a Diseño
2) Edición HTML
3) En Edición de HTML marcamos la opción expandir artilugios.
4) Buscamos la siguiente parte de código: ]]></b:skin> (para encontrarlo más rápido tecleamos Ctrl + F)
5) Localizado ]]></b:skin> justo antes pegamos lo siguiente:
#footer-column-container {
background: #000000;
width:890px;
clear:both;
font-family: 'Comic Sans MS';
}
.footer-column {
background: #f2f2f2 url(URL IMAGEN DE FONDO) no-repeat right bottom;
margin: 4px 0 0 0;
padding: 10px;
border: 3px solid #ccc;
}
Tan sólo debes modificar el valor del width por el valor de tu blog, es decir, si tu blog mide de ancho 900 deberás cambiar ese valor a 900, así el pie de página irá en concordancia con el resto del blog.
6) Una vez pegado el código anterior buscamos lo siguiente: <div id='footer-wrapper'>
7) A continuación pegamos:
<div id='footer-column-container'>
<div id='footer2' style='width: 32%; float: left; margin:1px 1px 1px 1px; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='footer3' style='width: 32%; float: left; margin:1px 5px 1px 15px; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:right;'>
</b:section>
</div>
<div id='footer4' style='width: 32%; float: right; margin:1px 1px 1px 1px; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div></div>
Si deseamos que las 3 columnas estén debajo del todo (lo máximo posible) deberemos copiar el último código después de <!-- Footer *** -->
El aspecto que lograremos será algo así:
Código extraído gracias a Rosa.
71 comentarios:
Men lo hice y todo bien pero los margenes me salen blancos y mi blog es fondo negro tirando a gris, que debo modificar para q el margen sea negro?
Busca en footer "background" y ahí modifca el color.
Saludos
Debajo de div id='footer' no me sale nada de background solo las cosas que agregue DESPUES de eso, es que mi plantilla es rara no tiene footer-wapper ni !footer*** de la forma que tu has puesto, lo uniko parecido que vi fue div id='footer'> y debajo no habia mas pues justo debajo lance los codigos y quedo como esta ahora. www.hiphopline.net, pilla.
Es mucho abuso si te pido algun msn personal?.
Elimina esto: border: 3px solid #ccc;
(está en la primera parte del código).
Por supuesto que no es ningún abuso, pero me sabe mal pero no empleo MSN.
No te preocupes, hablamos aquí ;)
Muchas gracias probare y te aviso por cierto ya te agregue en recomendadas.
Oh por cierto ya comprendi algo cuando me hablabas del FOOTER te referias al que agregue de primero antes de los ultimo 3, pense que te referias al FOOTER que esta antes de las 3 columnas, es que olvide que en el paso 5 agregue otro footer, ahora si tratare de arreglarlo.
Vale, dime cosas cuando puedas. Veo que ahora tienes los bordes del footer de color negro.
Si eliminas lo de "border: 3px solid #ccc;" en teoría tiene que dejar de haber borde.
También puedes optar por ponerle al borde el mismo color que tienes en el blog de fondo.
Una ves mas gracias, ya lo he solucionado y no tuve que borrar el code, exacto, como has notado usando un poco la logica pude cambiar el color del borde en la linea border: 3px solid #ccc; preferi cambiarle el color ya que el borde le da decensia y "orden", ahora jugare mas con los colores. Una cosa sabes que me esta descuadrando el pie de pagina los creditos y eso, ahorita se ve normal pq no tengo elementos grandes en mis 3 nuevas columnas pero cuando las lleno d gadgets y eso se me corren los creditos a la derecha o izkierda quedando como montado "2009 Hip Hop Line ® Todos los derechos reservados
Powered by Free CSS Templates | Modify by HipHopLine ™ ", como hago para que no me afecte esta?
Eso es porque si te fijas cada columna tiene un valor de 32% (aparece en el código del paso 7) . Si modificas los valores de cada columna harás más grande o pequeña cada columna. Ten en cuenta que entre las 3 columnas tienen que sumar 96% para que encajen, si las haces que sumen más del 96% no van a caber. Por ejemplo, si a una le quitas un 5% a la otra se los tendrás que sumar.
En tu caso creo que deberías hacer un poquito más grande la columna de en medio (div id='footer3') y un poquito más pequeña la de la derecha (div id='footer4').
A ver si te funciona. Un saludo
Vale, creo que no te entendí. Te refieres a los créditos que no pertenecen a las columnas del footer. Es decir, las tienes puestas al final del código HTML.
Prueba a poner antes de "2009 Hip Hop Line ® Todos los derechos reservados
Powered by Free CSS Templates | Modify by HipHopLine ™ " estos códigos: <br></br>
Sirve para crear un salto de línea (como si en el Word pulsases enter para cambiar de párrafo)
Cuantas veces puedo hacer el salto de linea, si pongo 4 veces el codigo 4 veces hace espacio?
Pues no me sirvio el salto de linea, los creditos siguen pegados al pie de las columnas deformandose el texto, probare lo de cambiar el tamaño, q tamaño es recomendable?
El problema del tamaño es que solo lo modifica a lo ancho.
La solución que yo veo es que pongas esos créditos antes del footer.
Si te fijas, yo para solucionar el problema puse 4 columnas y en ellas puse lo del copyright, etc.
Es una idea. Como última medida podrías probarla.
Veo que ya lo arreglaste. Enhorabuena :D
¿Y yo cómo puedo saber cuanto mide de ancho?.
Otra preguntita, que no tiene absolutamente nada que ver con esta entrada, ¿puedes poner mi enlace de LA VARIEDAD DE LA MÚSICA en tu blog?. Yo pongo el tuyo en mi blog, pero, ¿donde está tu enlace?
Hola Sumer.
Respecto a lo del ancho de la página aquí tienes la solución: http://www.quierocrearunblog.com/2009/07/cambiar-el-acho-de-las-columnas-y-de.html
Claro que lo puedo poner, ahora lo añado. Lamentablemente no tengo ninguno de esos tamaños. Sólo tengo disponible el siguiente: http://img194.imageshack.us/img194/5771/logoquiero200.png
Un saludo!
Hola: mi plantilla no tiene para pie de página, como puedo agregar una, por que con este metodo no se pudo, muchas gracias de todas formas por la informacion y muy padre tu blog.
Hola Cris. Tomo nota de tu problema y un día dedicaré un problema a ello, ya que por un comentario sería muy muy extenso.
Muchísimas gracias por tu visita y por tu comentario.
Hola Cris. Tomo nota y en los próximas días añadiré una entrada al respecto.
Un saludo.
Por favor ayuda!!!
necesito poner un pie de pagina a mi plantilla que no tiene, tal como cris... ayudanos, por favor
Hola Nuestra Casa NL. A lo largo del dia creare la entrada sobre lo que me preguntas. Saludos.
MUCHAS GRACIAS! ESPERARE TU RESPUESTA!
Hola.
Mismo problema que Cris, quiero poner un pie de página para poner ahí enlaces (como te comenté antes ¿te acuerdas?, y con este metodo no se puede, ojalá nos puedas ayudar con ello.
Muchas gracias
A ver si hoy tengo un rato y redacto un tutorial. Siento no haberlo hecho antes, no he tenido tiempo.
Un saludo.
Hola, os lo explico por aquí de momento:
Debéis seguir todos los pasos hasta el paso 7) en el que tendréis que poner el siguiente código antes de </body>
<div id='footer-column-container'>
<div id='footer2' style='width: 96%; float: left; margin:1px 1px 1px 1px; text-align: center;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
</div>
No lo he podido poner en práctica porque no he encontrado plantilla sin footer. En cuanto pueda y lo haya probado lo comprobaré y crearé la entrada. Siento las molestias ocasioandas.
cual molestia??? estoy agradecidisima contigo!!!
un abrazo, te felicito por tu blog
Gracias Nuestra Casa NL. Haz la prueba en cuanto puedas. Recuerda guardar una copia de la plantilla antes de modificar nada.
Hola!!!!
Eres un buenazo, me ha funcionado muy bien, solo me mandaba error porque me faltaba cerrar un div, hecho esto, quedo perfecto.
Gracias por tus atenciones
Hola Adriana. Entonces lo que puse en el paso 27) funciona correctamente, ¿no? ¿Dónde falta el div? Si puedes comentarlo te lo agradecería. Gracias, un saludo.
Si, funciona perfectamente, solo me marcaba que faltaba cerrar un div, por lo que los fui contando y resulto que después de lo que tu nos marcas en 27), justo después del último /div con sus respectivos <>, falta uno más, y ya está.
¡Funciona!
Gracias de nuevo
Mil gracias a ti, es que no tuve ocasión de probarlo y lo hice sólo pensando cómo se haría teóricamente. De todas formas en cuanto me sea posible y lo haya comprobado, creo la entrada para que quede todo más claro. Mil gracias de nuevo.
Hola, soy yo de nuevo y esta vez te pongo el comentario en su sitio y sigo a punto de enloquecer con las tres columnas y sobre todo con el margen de la columna derecha. Hay algo que hago mal y no sé qué es pero me salen desproporcionadas. Si tienes o sabes dónde está un código sencillito, como los que pones normalmente, que me diga clarito qué margen es el que tengo que cambiar te lo agradecería un montón. Un saludo.
Hola Ángeles. Gracias por ponerlo aquí. Te lo agradezco.
Para que no te salgan desproporcionadas tienes que jugar con el width: 32% del paso 7). Dependiendo de cada plantilla, entre las 3 columnas no deben sumar un determinado %. En este caso está puesto para que entre las tres sumen 96%. Debes ir probando valores hasta que te queden centradas.
Por normal general no pueden sumar el 100% porque se descolocan. Ves probando que sumen más del 96% y menos del 96% entre las 3.
Espero haberme explicado. Si tienes problemas vuelve a decirlo sin problemas.
Gracias por tu comentario. Un saludo.
oie...sabes q kiero ponerle tres columnas a mi blog...la cosa esq revice alhunos tutoriales y puse la nueva columna...mmm pero no aparece cuendo voi a
"Diseño"....para poder ponerle unos widgets...me puedes ayudar???
quiero que me aparesca en la seccion diseño
plis!!!!
Hola Nathan. En mi blog no he mencionado nada sobre añadir otra sidebar. Creo que deberías preguntar a los creadores de esas páginas en donde has seguido los tutoriales, ya que ellos te podrán ayudar mejor.
De todas formas, próximamente tengo pendiente añadir una entrada para saber cómo añadir una sidebar.
Saludos.
GRacias gracias me ayudado un monton!!!
Gracias a ti Bilos. ¡Un saludo!
Muchas gracias salvaste mi vida.. busqué por toda la web, casi me di por vencida hasta que encontre tu blog, todo muy bien explicado y fácil en comparación a otras cosas que encontré, en las cuales los procedimientos eran bastante complicados.
Si tengo una duda.. es posible bajo esas 3 columnas colocar otra sidebar horizontal pero que abarque todo el ancho del blog (como las que vienen por defecto en la mayoría de las plantillas).. si me pudieras ayudar con eso te lo agradeceria un monton.
Saludos!!! y mil gracias!!!!
Hola Catalina, gracias por tu visita y comentario. Espero que ahora que has conocido este blog nos visites más a menudo. Poderse sí se puede, pero es algo complicado de explicar por aquí.
Deberías seguir los mismos procesos que arriba, pero en el paso 5) en lugar de llamarlo #footer-column-container deberías ponerle por ejemplo #footer-column-container2
Todo ese código iría después del que ya pusiste cuando colocaste las 3 columnas del footer.
Luego tendrías que seguir los pasos pero en el paso 7) deberías pegar esto:
<div id='footer-column-container2'>
<div id='footer2' style='width: 96%; float: left; margin:1px 1px 1px 1px; text-align: center;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:center;'>
</b:section>
</div>
</div>
Eso es todo. Lo acabo de escribir sin probarlo, pero debe funcionar. Dime cosas cuando lo hayas probado.
Un saludo y muchas gracias por tu comentario y visita.
Esta opcion me ha sacado canas verdes, pero al fin lo he logrado, mi plantilla no tenia el footer y con todos los comentarios lo he logrado poner, una cosa admin, te recomiendo que edites la entrada o crees una nueva pues a mi me funciono perfectamente.
Gracias admin, una ves mas te lo agrsdezco.
Gracias amigo. Te haré caso y lo crearé como entrada, no me acordaba que de aquí podía sacar otra entrada para ayudar a los que de comienzo no tienen footer.
Un saludo y gracias a ti por tu visita y por comentar.
HOLa! tengo una duda que me lleva comiendo los pelos de ase dias jeje me podrian decir como puedo hacer para veriar el numero de columnas (en ves de poner 3 columnas, quisiera poner 4, 2, o simplemente una) como lo ago??
MUy buena esta la pagina.SAludos!!:)
Hola Bilos. Para tener una sola columna deberías quitar en el paso 7) lo siguiente:
<div id='footer3' style='width: 32%; float: left; margin:1px 5px 1px 15px; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:right;'>
</b:section>
</div>
<div id='footer4' style='width: 32%; float: right; margin:1px 1px 1px 1px; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
Luego tendría que modificar, también del paso 7), en donde dice div id='footer2' style='width: 32%
Debes cambiar ese 32% por un 96%.
Saludos, si tienes problemas coméntalo de nuevo aquí.
Una enorme felicitación y un gracias para tus aportes y por el modo en que lo haces.
El blog que estoy haciendo -it843.blogspot.com - se sustenta exclusivamente en las enseñanzas de personas como vos.
Gracias por tus palabras "w". Me alegra saber que el esfuerzo que dedico a este blog se ve recompensado con comentarios como el tuyo.
Un saludo y gracias por tu mensaje.
Hola, solo tengo una duda más: como dejo 2 en vez de 3 columnas?. Es decir, eliminar la tercera sin completar el ancho de la pagina
Pues bastaría que en el paso 7) eliminásemos una columna. Nos debería quedar así:
<div id='footer-column-container'>
<div id='footer2' style='width: 32%; float: left; margin:1px 1px 1px 1px; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='footer3' style='width: 32%; float: left; margin:1px 5px 1px 15px; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:right;'>
</b:section>
</div>
</div>
Excelente. Notarás que soy un novato en esto.
Sería interesante que nos ilustraras con algun post sobre la inclusión del blog en diferentes directorios, la importancia y los beneficios -o no- de esto y las diferencias entre ellos si es que las hay. Y, si no estoy abusando demasiado, una explicación sobre la necesidad de intercambio de links.
Gracias y un abrazo desde Uruguay para uds.
Hola w. Todo lo que me mencionas encontrarás información en esta entrada: http://www.quierocrearunblog.com/2009/11/libros-seo-posicionamiento-buscadores.html
De todas formas, cuando tenga más experiencia en esos temas, iré argumentando mi opinión y experiencia en alguna entrada, tal y como he ido haciendo siempre. Echa un vistazo a la sección de la columna derecha sobre SEO.
Desde ya te recomiendo que insertes tu blog en directorios (en este blog encontrarás varias páginas sobre ello) pero con moderación. Muchos enlaces entrantes en poco tiempo te podrían hacer que Google te penalice. El intermcabio de links es una buena opción, pero sólo lo recomiendo entre sitios de tu misma temática.
Saludos, y gracias por comentar.
Yo tengo una duda..
por ejemplo donde se pone el "nombre"
ejemplo de tu pagina y de tu formulario :
" FORMULARIO DE CONTACTO"..
las letras son de color blanco y fondo naranja..
como hago para cambiar el color de la letra,tipo y tamaño.. y poner un fondo(como el tuyo naranja pero de otro color)..
es que a mi de "default" me salen letra grande y medio roja.
PD. agrego.. la pregunta es por que agregue las 3 columnas y un formulario.. con los tutoriales de la pagina.
Hola Dilan, ves a Configuración->Fuentes y colores. Allí podrás cambiar muchos parámetros. Ves probando hasta que te guste el resultado.
Gracias por tu visita.
No logro repartir los espacios alrededor de las columnas de manera simetrica. Entre la segunda y la tercera columna me queda un espacio el doble de valor que entre la primera y la segunda. Y al llevar la barra lateral hasta el final, me desaperecen los textos insertos en los tres gadgets.Estos no ocurre si limito el recorrido. Espero que me entiendas. Me ayudas? El blog es www.militanciaenrojoynegro.blogspot.com. Gracias
Hola GuillermoB. Te sale desproporcionado porque tu blog es muy ancho y las 3 columnas a pie de páginas son más pequeñas. Debe coincidir el tamaño. Revisa los pasos por favor. Un saludo y bienvenido al blog.
Otra vez te molesto. Gracias por la respuesta anterior. Aprovecho para ecirte que tu blog enseña mucho. Yo soy un neofito. Ahora va: como hago para reducir el tamaño de las letras de los titulos y los textos de las tres columnas del footer? Gracias de nuevo.
En principio como no está declarado el tamaño de la letra, debería tener la misma letra que el resto de tu blog. De todas formas, si no es de tu agrado, al código del paso 5) añádele font-size:12px; Luego cambia por el 12 por el tamaño que desees. ¡Un saludo!
Hola!!
Bueno, en vista de mi nuevo blog, he decidido poner tres columnas al final, pero querria que no resaltaran respecto a lo demas, quiero decir en el color de los titulos, los enlaces...
Ya me he mirado los codigos y trasteado un poco, tambien he revisado los 50ypico comentarios y no he visto nada, solo algo sobre la pestaña fuentes y colores (que tengo desactivada, no se el porque, supongo que por la plantilla)
Blog: Portafolio de Nestor
Tienes un muy buen blog me está ayudando mucho en la construcción de mi blog..una pregunta, lo que pasa es que despues de añadir las 3 columnas al pie de página quisiera ajustar cada columna lo mas cercano posible entre ellos y cada uno ocupando lo máximo posible dentro de cada columna...nosé como podría hacerlo..por ejemplo quiero insertar en una columna un video de youtube y por mas q trato de ajustar ancho y altura siguen habiendo espacios dentro de la columna, quisiera q no haya espacio alguno dentro de cada columna..a ver si em ayudas..gracias de antemano
@Nestor. En el paso 5) en font-family pon el estilo de letra que emplees en el resto de tu blog.
#footer-column-container {
background: #000000;
width:890px;
clear:both;
font-family: 'Comic Sans MS';
@David. Para cambiar el tamaño de cada una de estas nuevas 3 columnas lo hacemos cambiando el 32% del paso 7). Entre todas debes respetar no pasar de un 96% (depende del blog). Para poner vídeos de youtube en un blog debes tener en cuenta esta entrada: http://www.quierocrearunblog.com/2009/08/como-poner-un-video-de-youtube-en-la.html
Saludos y bienvenido al blog.
Gracias por el post! Me sirvió mucho.
Todavía no logré que el fondo del footer y la tipografía sea idéntica a la del sidebar, se podrá hacer con definiciones de variables??
Mi blog es http://officenet.blogspot.com
hola amigo oye hace ya tiempo puse estas columnas en mi blog mundo online pero ahora hay algo q kisiera saber como le ago para q el titulo salga sobre la imagen q tienen los demas gadgets q tengo en la columna lateral de mi blog y ya de paso modifikr el grueso y tamaño de la letras del titulo espero haber sido claro esperare tu respuesta nos vemos
@Leo. Fíjate en el comentario anterior al tuyo. Ahí tienes tu respuesta ;)
@tebant. Lo lamento, pero no entiendo tu pregunta. Por favor trata de expresarte correctamente con comas y puntos para entender las frases. Discúlpame, quizá sea fallo mío. Un saludo.
hola amigo yo de nuevoperdon por no explicarme bien, alo que me refiero es que no se como hacerle para que salga la imagen que lleva el titulo del gadget. Por ejemplo tus gadgets tienen una imagen naranja no? mi imagen es roja pero como ago que aparesca en los nuevos gadgets. Gracias y si aun no me se expicar ps nimodo asi lo tendre que dejar
hola queria decirte qu la distancia entre la cabecera y el menu de mi blog av eces se amplia y cuando pasa casa rato aveces al ir a las columnas de abaj ode todo a las 3 del footer bajas de completo la barra y cuand oarriba se separa la cabecera dle menu abajao en el foter no se ve el texto de las 3 columnas soloo las imagenes me podias ayudar gracias anticipadas
@tebant. Hola. Dependiendo de tu plantilla te aparecerá algo así como ".sidebar .widget" allí encontrarás background y en él deberás poner el color que quieras.
@masidejuvenil. ¿Cuándo te ocurre ese problema? ¿Siempre o dependiendo del navegador que emplees?
Gracias a los dos por comentar.
Hola, Interesante aporte, seria posible poner estas 3 columnas debajo de la Entrada.
HOLA. QUIERO SABER PORQUE NO ME APARECEN LAS COLUMNAS... TE CUENTO QUE HAGO TODO EL PROCEDIMIENTO, PONGO VISTA PREVIA Y SE NOTA EL CAMBIO, PERO AL MOMENTO DE IR A "DISEÑO" NO APARECEN Y LA PLANTILLA ESTA COMO SU ORIGINAL.
FAVOR DE RESPONDER A LA BREVEDAD A: iecviale@live.com
GRACIAS
Hola, las columnas funcionan, pero quiero colocarlas al final de todo y la verdad probe y probe y no me quedan abajo de todo como indicaste. Podes ayudarme?
NORMAS PARA COMENTAR:
1) Si no encuentras lo que buscas emplea el buscador.
2) Si quieres preguntar algo, primero asegúrate que tu comentario guarda relación con la temática de la entrada.
3) Si tu pregunta no encaja en ninguna entrada mándame un e-mail en contacto situado a pie de página para preguntarme lo que necesites.
4) Trata de expresarte bien. Explica correctamente tu problema, y por favor, no escribas en mayúsculas ni emplees lenguaje SMS. Escribir correctamente es gratis.
5) No hagas SPAM. Comentarios breves con la unica intención de dejar la dirección de tu blog será considerado SPAM.
6) No se permiten descalificaciones ni faltas de respeto hacia ningún usuario.
Si no se cumplen estas seis normas el comentario será ignorado y/o borrado.
Respetando estas normas ganamos todos, conseguimos un mayor orden y ayuda para los nuevos visitantes. Gracias por tu comprensión.
Publicar un comentario en la entrada