En una plantilla minima de blogger el footer tiene este aspecto:
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Ojo, mide lo mismo el footer que el outer-wrapper. Si no es así es preferible colocarle el mismo px.
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Supongamos que no nos deja añadir nuevos gadgets en la zona del footer.
Diseño>Edición de HTML>expandimos artilugios
- Control+F y buscamos hacia el final:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Ese trozo se cambia por:
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'>
</b:section>
</div>
(Se puede obviar el paso si el footer deja añadir más gadgets en la zona)
► Con el código inicial de muestra que siempre sale en la minima de blogger se puede:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background-color: #8A0829;
height:180px;
}
El background anterior que es un color con una altura determinada,(height que puede variar a conveniencia), se puede sustituir por background-image:url('url-imagen');
► Supongamos que añadimos columnas en el footer. Más allá de eso se suele colocar los créditos antes de
Para un ejemplo de información y créditos añadiremos los estilos CSS justo antes de ]]></b:skin>
.autor{
float: left;
line-height: 2em;
color:#fff;
padding-left: 20px;
padding-top: 75px;
font-family:Arial, Verdana, Sans-Serif;
font-weight: normal;
font-size:11px
}
.creditos {
float: right;
color: #fff;
line-height: 1.4em;
padding-top: 75px;
padding-right: 20px;
font-family:Arial, Verdana, Sans-Serif;
text-transform:uppercase;
font-weight: normal;
font-size:11px;
text-transform: none;
}
Guardar.
Vamos a Diseño>Elementos de la página y dentro de un gadget de HTML/JavaScript añadimos:
<div class="autor">
<p> <a href="url-blog" title="Texto al pasar el cursor">(aqui-nombre-blog)</a> (año) </p>
</div>
<div class="creditos">
<p><a href="url-pagina-autor">texto enlace</a></p>
</div>
Notas:
- Se pueden añadir más datos y hasta hacer uso de los ASCII
- Una parte la colocará a la izquierda y otra a la derecha....se puede sustituir o eliminar esa opción.
- En el CSS todo es modificable desde el tipo de letra, tamaño, distancia entre el texto y el borde...
