2 estilos de crédito a pie de página

Hey everyone! Hoy, como habéis podido leer en el título, vengo con un tutorial (o dos, como queráis), que son dos formas de poner los créditos de nuestro blog a pie de página, tal y como tengo yo ahí abajo que pone: hey! aradne © 2016 - 2020 - Diseño de hey!aradne | Tecnología de Blogger. 

Estilo 1

Este primer estilo es el más simple y es el que estoy usando actualmente, pero aún así dejo una captura de cómo se ve por si en un futuro cambio de diseño (que pasará).

Para ello vamos a nuestro HTML y buscamos ]]></b:skin> y justo encima ponemos el siguiente código:

#footer-wrapper {

    background:  #FFBADB; /*** color del fondo ***/

    background-repeat: no-repeat;

    z-index: 1000;

    height: 20px; /*** Altura de la barra ***/

    clear: both;

    font-size: 90%; /*** tamaño de la fuente ***/

    color: #000000; /*** color de la fuente ***/

    text-align: center; /*** alineamiento de la fuente ***/

    padding: 5px;

    }

Todo lo que está en negrita se puede cambiar. Si queremos, podemos cambiar el porcentaje del tamaño de la fuente por px, sin olvidar el punto y coma al final o no funcionará.

Ahora buscamos </body> y encima colocamos el siguiente código:

<div id='footer-wrapper'>Créditos del blog</div>

O si lo prefieres, puedes poner créditos con links:

<div id='footer-wrapper'><div align="center">Design by <a href="URL DE TU BLOG" target="_blank">TU NOMBRE</a></div>

</div>

Como siempre, todo lo que está en negrita, se puede cambiar, al igual que el texto.

Estilo 2

Este segundo estilo nos permite añadir el logo de nuestro blog o una pequeña imagen de lo que queramos.

Al igual que antes, buscamos ]]></b:skin> y encima ponemos el código:

#rodape-creditos {

font:normal bold 13px Arial; /* - Fuente del pie de página - */

color:#FFFFFF; /* - Color de la fuente - */

background:#303030; /* - Color del Fondo del pie de página - */

border-top:4px solid #3F4C6B; /* - Edite el borde - */

margin:0px 0px 0px; /* - No es necesario editar - */

}

#rodape-creditos a:link {

color:#A8B5C4; /* - Color de los Links del pie de página - */

text-decoration:none; /* - Decoración del Link - */

outline:0px solid #FFFFFF; /* - No es necesario editar - */

}

#rodape-creditos a:visited {

color:#A8B5C4; /* - Color de los Links Visitados - */

text-decoration:none; /* - Decoración de los Links Visitados - */

outline:0px solid #FFFFFF; /* - No es necesario editar - */

}

#rodape-creditos a:hover {

color:#A8B5C4; /* - Color del Link con el ratón encima - */

text-decoration:underline; /* - Decoración del link con el ratón encima - */

outline:0px solid #FFFFFF; /* - No es necesario editar - */

}

Ahora buscamos </body> y justo encima añadimos el siguiente código:

<div id='rodape-creditos'>

<table border='0' cellpadding='5' cellspacing='0' oncontextmenu='return false' ondragstart='return false' width='100%'><tr>

<td style='width:72%;text-align:left;'>&#169; <a href='LINK DEL BLOG'>NOMBRE DEL BLOG</a> - 2012. Todos los derechos reservados.<br/>Creado por: <a href='URL DEL AUTOR DEL BLOG' rel='nofollow' target='_blank'>NOMBRE DEL AUTOR DEL BLOG</a>.<br/>Tecnologia de <a href='http://www.blogger.com' target='_blank'>Blogger</a>.</td>

<td style='width:28%;text-align:center;'><a href='LINK DEL BLOG'><img alt='imagem-logo' border='0' id='logo-footer' oncontextmenu='return false' ondragstart='return false' src='LINK DEL LOGO DEL BLOG'/></a><br/></td></tr>

</table>

</div>

De nuevo, todo lo que está en negrita se puede modificar.

Y eso es todo por este tutorial o tutoriales. Espero que os haya gustado y si tenéis cualquier duda, no dudéis en poneros en contacto conmigo :).