Como adicionar um rodapé ao template
O primeiro passo é criar o código HTML do rodapé num componente (Personalização > Intermédia > Componentes):
<div id="footer">
<!-- Conteúdo do rodapé do blog -->
<p class="left">
<a href="http://validator.w3.org/check?uri=referer">XHTML</a> -
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
</p>
<p class="right">
© Copyright 2007. Nome do blog - <a href="/data/rss">RSS</a><br />
Design: <a href="mailto:meunome@meuemail.pt">Meu nome</a>
</p>
</div>
Depois é preciso mostrar o componente numa posição do Template. Eu sugiro que seja colocado no fim da barra dos Posts ("Posicionamento no rodapé dos posts"), mas pode ser colocado em qualquer posição. Gravar as alterações.
Agora é preciso "mover" o componente que criamos para o rodapé do blog. Para isso temos que alterar a css associada ao template. Vamos ao Editor de css (Personalização > Avançada > Editor de css) e acrescentamos as seguintes alterações no fim da css:
#container {
/* IMPORTANTE */
position:relative;
}
#posts, #extras, #extrasB {
/* Margem inferior para o footer. Deve ser igual à altura do rodapé */
margin-bottom: 50px;
}
#footer {
/* Posicionamento do rodapé no fundo do container */
position:absolute;
bottom: 0;
left: 0;
/* Dimensões do rodapé */
width: 740px;
height: 50px;
/* Border superior */
border-top: 1px solid #CCCCCC;
}
#footer p.right {
/* Alinhamento à direita */
float: right;
text-align: right;
}
#footer p.left {
/* Alinhamento à esquerda */
float: left;
text-align: left;
}
No fim, vamos ter um rodapé assim: