Añadir pie de página personalizado a blogger

Eliminar con la tecnología de blogger

Para eliminar el footer que viene predeterminado en la plantilla de blogger, vamos a:

Tema
Antes de modificar cualquier cosa en el HTML vamos a realizar una copia de seguridad.
Luego . . .Editar HTML, le damos a ir al widget y seguido seleccionamos attribution 1.

Ahora bien, en el cuadro donde está el montón de código buscamos la parte que dice footer
showaddelement='no', y cambiamos 'no' por 'yes'.
Donde dice locke='true', cambiamos 'true' por 'false', para que nos permita eliminar "con la
tecnología blogger", damos clic en guardar tema.

Luego vamos a la parte de diseño y desplazamos el cursor hasta el final y en la parte donde
dice footer, seleccionamos editar, eliminamos el footer y guardamos disposición.

Añadir Pie de página personalizado y que ocupe todo el ancho del blog

Volvemos a Tema
Seleccionamos Personalizar, Avanzado y luego en Añadir css

Vamos a añadir el código para crear nuestro footer, Puedes modificar el tamaño, color, entre
otras cosas; es importante que si modificas la altura uses los mismos valores en padding-top y
padding-bottom.

H a z l o b o n i t o d i y. b l o g s p o t. c o m
.footer-wrapper {

background: #8F9493; /*Color de fondo del pie de página*/

padding-top: 50px; /*Altura del pie de página*/
padding-bottom: 50px; /*Altura del pie de página*/
width: 100%;
text-align: center;
font: normal normal 11px Arial; /*Tipografía y Tamaño*/
color: #ffffff; /*Color del texto del pie de página*/
text-transform: uppercase; /*Esta línea de código es para poner las letras en mayúsculas */
letter-spacing: 2px; /*Espacio entre letras*/

Guardamos los cambios . . .

Vamos a Tema, Editar HTML . . .

Presionamos ctrl + f y en el buscador pegamos esta etiqueta: </body>
Copia y modificar el código . .
Antes de la etiqueta </body> vamos a pegar el código previamente personalizado.

Esta Parte de código es para la redes sociales, si no quieres ponerlas simplemente no copies
está parte del código.

<div class='footer-wrapper'>

<div style='padding-top:15px;padding-bottom:10px; '><center>

<a href='URL AQUI' target='_blank'><img HSPACE='10' src='URL IMAGEN' title=''/>

<a href='URL AQUI' target='_blank'><img HSPACE='10' src='URL IMAGEN' title=''/></a>

<a href='URL AQUI' target='_blank'><img HSPACE='10' src='URL IMAGEN' title=''/></a>

<a href='URL AQUI' target='_blank'><img HSPACE='10' src='URL IMAGEN' title=''/></a>

</a></center> </div>

Nombre de tu Blog &#169; 2017 Todos los derechos reservados

</div>

H a z l o b o n i t o d i y. b l o g s p o t. c o m
Nota:

En caso de que desees alinear el texto o los iconos de redes sociales del footer ya sea a la
izquierda o derecha solo debes usar el siguiente código, en este los iconos no están
centralizados, más bien tienen una alineación los puedes colocar a la izquierda o derecha, las
marcaré el rojo para que elijas la orientación que desees y simplemente la coloques.

left = izquierda

right = derecha

<div class='footer-wrapper'>

<div style='padding-top:15px;padding-bottom:10px; '> <div align=" ORIENTACION ">

<a href='URL AQUI' target='_blank'><img HSPACE='10' src='URL IMAGEN' title=''/>

<a href='URL AQUI' target='_blank'><img HSPACE='10' src='URL IMAGEN' title=''/></a>

<a href='URL AQUI' target='_blank'><img HSPACE='10' src='URL IMAGEN' title=''/></a>

<a href='URL AQUI' target='_blank'><img HSPACE='10' src='URL IMAGEN' title=''/></a>

</a> </div> </div>

Nombre de tu Blog &#169; 2017 Todos los derechos reservados

</div>

Por aquí te dejo el video tutorial explicativo para que lo puedas realizar sin ningún problema.
https://www.youtube.com/watch?v=LVG-wc7VnO8

H a z l o b o n i t o d i y. b l o g s p o t. c o m