Bienvenidos. El footer corresponde al pié de página, es la sección que se
muestra debajo del blog. En este tutorial les enseñaré una forma de añadir
varias columnas para aprovechar ese espacio que muchas veces no se aprovecha.
Y borraremos todo lo que se encuentre entre ese código y el cierre del mismo. El </div> del contenedor.
Ejemplo:
<div id ='footer-wrapper'>
Código que tenemos que borrar.
Hasta encontrar el cierre del contenedor.
</div>
Una vez vació todo el contenedor del footer agregamos nuestro nuevo código que es el siguiente:
Ahora solo nos queda agregar los estilos correspondientes (css) para esto buscaremos como ya sabemos la parte de nuestro codigo...
Copiamos y pegamos el siguiente código:
Guardamos todos los cambios y listo.
Algo IMPORTANTE QUE DEBEMOS TOMAR EN CUENTA...
Primero, tienes que saber que el footer no debe contener
espacios para gadgets, si los contiene, deberás eliminar toda línea que se
encuentre en él.
 |
| footer multi-columna |
Antes que nada te recomiendo que hagas un respaldo de tu plantilla por si algo no sale como lo esperas, después sabiendo que en la mayoría de las plantillas de blogger el footer se le denomina footer-wrapper lo que haremos será eliminar todo el contenido dentro del contenedor. Para eso busca en el código de tu plantilla utilizando ctrl + f (para que se abra el cuadro de búsqueda) y pegas el siguiente código:
<div id='footer-wrapper'>
Y borraremos todo lo que se encuentre entre ese código y el cierre del mismo. El </div> del contenedor.
Ejemplo:
<div id ='footer-wrapper'>
Código que tenemos que borrar.
Hasta encontrar el cierre del contenedor.
</div>
Una vez vació todo el contenedor del footer agregamos nuestro nuevo código que es el siguiente:
<div id='piedepagina'>
<div id='izquierdafooter'>
<h6>Título de la columna 1</h6>
Contenido de la primera columna.
</div>
<div id='centradofooter'>
<h6>Título de la columna 2</h6>
Contenido de la segunda columna.
</div>
<div id='derechafooter'>
<h6>Título de la columna 3</h6>
Contenido de la tercera columna.
</div>
</div>
<div id='izquierdafooter'>
<h6>Título de la columna 1</h6>
Contenido de la primera columna.
</div>
<div id='centradofooter'>
<h6>Título de la columna 2</h6>
Contenido de la segunda columna.
</div>
<div id='derechafooter'>
<h6>Título de la columna 3</h6>
Contenido de la tercera columna.
</div>
</div>
Ahora solo nos queda agregar los estilos correspondientes (css) para esto buscaremos como ya sabemos la parte de nuestro codigo...
]]></b:skin>
Copiamos y pegamos el siguiente código:
/*Contenedor general tutoriales2010.blogspot.mx*/
#footer-wrapper { margin-bottom:10px; background:#969696; /*Color de fondo del footer*/ width:100%; /*Esto permite que el footer se muestre al 100% del blog*/ padding:15px; /*Espaciados*/ margin-left:auto; /*IGNORAR*/ margin-right:auto; /*IGNORAR*/ line-height: 1.5em; /*Separado entre líneas de texto*/ font-size:12px; /*Tamaño de fuente*/ } /*Contenedor de las 3 columnas*/ #piedepagina { border-radius:13px; /*Bordes redondeados*/ color:#fff; /*Color del texto*/ width:940px; /*Ancho del contenedor*/ height:210px; /*Alto del contenedor*/ margin:50px auto; /*Permite centrar el contenido*/ font-family: Century Gothic, sans-serif; /*Tipografía*/ text-align:left; /*Alineación del texto*/ margin-bottom:20px; /*Separación del borde inferior*/ background:#2d2d2d; /*Color de fondo*/ } /*Enlaces*/ #piedepagina a{ color:#fff; /*Color de los enlaces*/ } /*Títulos*/ #piedepagina h6 { color:#fff; /*Color de los títulos*/ font-size:16px; /*Tamaño de los títulos*/ margin:10px; /*Separación de los títulos*/ } /*Columna izquierda*/ #izquierdafooter { padding:10px; /*Espaciados internos*/ margin:0px; /*Distancia entre contenedores*/ background: url(http://3.bp.blogspot.com/-Wyk_YzkLG6U/TlJ2xmoNbeI/AAAAAAAABiw/C5Wk7lwhGGw/s1600/vertical+linea+ayudabloggers.png) right no-repeat; /*Imagen separadora*/ width:30%; /*Porcentaje del ancho de la columna*/ height:200px; /*Alto de la columna*/ float:left; /*Permite alinear a la izquierda esta columna*/ } /*Columna media*/ #centradofooter { padding:10px; /*Espaciados internos*/ margin:0px; /*Distancia entre contenedores*/ width:30%; /*Porcentaje del ancho de la columna*/ height:200px; /*Alto de la columna*/ float:left; /*Permite alinear a la izquierda esta columna*/ } /*Columna derecha*/ #derechafooter { padding:10px; /*Espaciados internos*/ margin:0px; /*Distancia entre contenedores*/ width:30%; /*Porcentaje del ancho de la columna*/ height:200px; /*Alto de la columna*/ float:right; /*Permite alinear a la derecha esta columna*/ background: url(http://3.bp.blogspot.com/-Wyk_YzkLG6U/TlJ2xmoNbeI/AAAAAAAABiw/C5Wk7lwhGGw/s1600/vertical+linea+ayudabloggers.png) left no-repeat; /*Imagen separadora*/ }
#footer-wrapper { margin-bottom:10px; background:#969696; /*Color de fondo del footer*/ width:100%; /*Esto permite que el footer se muestre al 100% del blog*/ padding:15px; /*Espaciados*/ margin-left:auto; /*IGNORAR*/ margin-right:auto; /*IGNORAR*/ line-height: 1.5em; /*Separado entre líneas de texto*/ font-size:12px; /*Tamaño de fuente*/ } /*Contenedor de las 3 columnas*/ #piedepagina { border-radius:13px; /*Bordes redondeados*/ color:#fff; /*Color del texto*/ width:940px; /*Ancho del contenedor*/ height:210px; /*Alto del contenedor*/ margin:50px auto; /*Permite centrar el contenido*/ font-family: Century Gothic, sans-serif; /*Tipografía*/ text-align:left; /*Alineación del texto*/ margin-bottom:20px; /*Separación del borde inferior*/ background:#2d2d2d; /*Color de fondo*/ } /*Enlaces*/ #piedepagina a{ color:#fff; /*Color de los enlaces*/ } /*Títulos*/ #piedepagina h6 { color:#fff; /*Color de los títulos*/ font-size:16px; /*Tamaño de los títulos*/ margin:10px; /*Separación de los títulos*/ } /*Columna izquierda*/ #izquierdafooter { padding:10px; /*Espaciados internos*/ margin:0px; /*Distancia entre contenedores*/ background: url(http://3.bp.blogspot.com/-Wyk_YzkLG6U/TlJ2xmoNbeI/AAAAAAAABiw/C5Wk7lwhGGw/s1600/vertical+linea+ayudabloggers.png) right no-repeat; /*Imagen separadora*/ width:30%; /*Porcentaje del ancho de la columna*/ height:200px; /*Alto de la columna*/ float:left; /*Permite alinear a la izquierda esta columna*/ } /*Columna media*/ #centradofooter { padding:10px; /*Espaciados internos*/ margin:0px; /*Distancia entre contenedores*/ width:30%; /*Porcentaje del ancho de la columna*/ height:200px; /*Alto de la columna*/ float:left; /*Permite alinear a la izquierda esta columna*/ } /*Columna derecha*/ #derechafooter { padding:10px; /*Espaciados internos*/ margin:0px; /*Distancia entre contenedores*/ width:30%; /*Porcentaje del ancho de la columna*/ height:200px; /*Alto de la columna*/ float:right; /*Permite alinear a la derecha esta columna*/ background: url(http://3.bp.blogspot.com/-Wyk_YzkLG6U/TlJ2xmoNbeI/AAAAAAAABiw/C5Wk7lwhGGw/s1600/vertical+linea+ayudabloggers.png) left no-repeat; /*Imagen separadora*/ }
Guardamos todos los cambios y listo.
Algo IMPORTANTE QUE DEBEMOS TOMAR EN CUENTA...
- Cada línea tiene una pequeña descripción para que no te confundas y para que puedas añadir el contenido exitosamente.
- Para añadir o quitar columnas, es necesario dar flotación, disminuir o aumentar los anchos de las columnas y además crear o eliminar las reglas.
- Si en tu plantilla el footer-wrapper no existe, deberás buscar la línea correspondiente, o si tu plantilla no tiene footer, crea el contenedor con ese nombre.
Si tienes dudas déjame un comentario y te contesto lo antes posible.
.JPG)
