Tutorial Blogger: Cómo poner un pie de página que ocupe todo el ancho del blog

Buen día de martes!!! ;)
Bueno, bueno... estoy que no paro últimamente; y es que quiero publicar un montón para compensar esas semanas negras en las que no pude hacer nada de nada. Hoy seguimos con los tutoriales blogger, porque me encanta preparlos.
Si vais al final del todo de mi blog, o lo que es lo mismo, el pie de página, veréis que ocupa todo el ancho de mi blog y que tengo puesto mis créditos y un enlace al aviso legal que tengo en una página de mi blog. Hoy os voy a enseñar a hacerlo.

Para este tutorial, vamos a modificar el HTML de nuestra plantilla (por tanto debéis guardar una copia de seguridad de la plantilla) y vamos a añadir un poco de código CSS. Vamos allá!!
AÑADIR EL HTMLComo siempre en estos casos, vamos a Plantilla → Editar HTML y buscamos lo siguiente:
</body>
Justo encima, vamos a pegar el siguiente código:
<div class='footer-wrapper'>Miss Lavanda &#169; Laura Conde 2014 | Todos los derechos reservados<br/><a href='URL'>Aviso Legal y Política de uso y privacidad</a><br/></div>
Aquí es donde vamos a escribir el texto que queremos que aparezca en el pie del blog. En este texto, hay dos líneas. Para conseguir esa separación se utiliza la etiqueta <br/> que os he marcado en negrita, por tanto si queréis más de dos líneas, las debéis separar siempre mediante esta etiqueta.
• De color granate encontráis el texto de la primera línea, que corresponde a los créditos y que debéis cambiar por el vuestro. Y en color verdecito está el símbolo de copyright ©, que es así como se escribe en HTML.
• La segunda línea es el enlace que nos llevará a la política legal, debéis poner la URL que lleva a ese aviso (como ya he dicho en mi caso es una página estática) y cambiar el texto del enlace (que está en naranja) si queréis modificarlo, o enlazar a otra cosa.
AÑADIR EL CSSAhora es el momento de darle estilo a nuestro pie de página y esto se hace añadiendo un poco de código CSS; para ello vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos esto (ya sabéis que todo lo que está de color es lo que debéis modificar a vuestro gusto):
.footer-wrapper {
background: #333333; /*Color de fondo del pie de página*/
padding-top: 30px; /*Con esta línea y la siguiente ajustamos la altura, para que quede bien, los dos valores deben ser iguales*/
padding-bottom: 30px;
width: 100%;
text-align: center;
font: normal normal 12px Arial; /*Tamaño y tipografía*/
color: #ffffff; /*Color del texto*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrar la línea*/
text-transform: uppercase; /*Para que esté en mayúsculas, si no queréis borrad la línea*/
}
.footer-wrapper a{
  color:#cccccc; /*Color del enlace (en este caso el aviso legal)*/
  text-decoration:none;
}
.footer-wrapper a:hover{
  color:#ffffff; /*Color del enlace al pasar el ratón por encima*/
}
• Los dos últimos bloques corresponden al color del enlace, yo lo he puesto por si no queréis que tengan el mismo color que los enlaces en general de vuestro blog; pero si sí lo queréis, los borráis y listo!
¿Os ha gustado el tutorial? ¿Os va a ser útil? Espero que sí!! :D:D Ya sabéis que compartir esto me hará muy feliz si creéis que le puede interesar a otras personas.
Pasad un martes muy chachi!! Besotes muy fuertes!! Laura.