Saltar para: Post [1], Comentários [2], Pesquisa e Arquivos [3]

A Equipa

O blog da equipa do SAPO Blogs. Um espaço para falar de blogs, esclarecer dúvidas e partilhar boas ideias.

Como adicionar um rodapé ao template

23.07.07 | Hugo
Neste post vou explicar como adicionar um rodapé ao template usando os componentes e a css.

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">
&copy; 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:
Rodapé

12 comentários

Comentar post