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

A Equipa

O blog da equipa que mantém o SAPO Blogs. Deixe a sua dúvida ou sugestão nos comentários de qualquer post.

A Equipa

O blog da equipa que mantém o SAPO Blogs. Deixe a sua dúvida ou sugestão nos comentários de qualquer post.

Como adicionar um rodapé ao template

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

Arquivo

  1. 2019
  2. J
  3. F
  4. M
  5. A
  6. M
  7. J
  8. J
  9. A
  10. S
  11. O
  12. N
  13. D
  14. 2018
  15. J
  16. F
  17. M
  18. A
  19. M
  20. J
  21. J
  22. A
  23. S
  24. O
  25. N
  26. D
  27. 2017
  28. J
  29. F
  30. M
  31. A
  32. M
  33. J
  34. J
  35. A
  36. S
  37. O
  38. N
  39. D
  40. 2016
  41. J
  42. F
  43. M
  44. A
  45. M
  46. J
  47. J
  48. A
  49. S
  50. O
  51. N
  52. D
  53. 2015
  54. J
  55. F
  56. M
  57. A
  58. M
  59. J
  60. J
  61. A
  62. S
  63. O
  64. N
  65. D
  66. 2014
  67. J
  68. F
  69. M
  70. A
  71. M
  72. J
  73. J
  74. A
  75. S
  76. O
  77. N
  78. D
  79. 2013
  80. J
  81. F
  82. M
  83. A
  84. M
  85. J
  86. J
  87. A
  88. S
  89. O
  90. N
  91. D
  92. 2012
  93. J
  94. F
  95. M
  96. A
  97. M
  98. J
  99. J
  100. A
  101. S
  102. O
  103. N
  104. D
  105. 2011
  106. J
  107. F
  108. M
  109. A
  110. M
  111. J
  112. J
  113. A
  114. S
  115. O
  116. N
  117. D
  118. 2010
  119. J
  120. F
  121. M
  122. A
  123. M
  124. J
  125. J
  126. A
  127. S
  128. O
  129. N
  130. D
  131. 2009
  132. J
  133. F
  134. M
  135. A
  136. M
  137. J
  138. J
  139. A
  140. S
  141. O
  142. N
  143. D
  144. 2008
  145. J
  146. F
  147. M
  148. A
  149. M
  150. J
  151. J
  152. A
  153. S
  154. O
  155. N
  156. D
  157. 2007
  158. J
  159. F
  160. M
  161. A
  162. M
  163. J
  164. J
  165. A
  166. S
  167. O
  168. N
  169. D
  170. 2006
  171. J
  172. F
  173. M
  174. A
  175. M
  176. J
  177. J
  178. A
  179. S
  180. O
  181. N
  182. D

Subscrever por e-mail

A subscrição é anónima e gera, no máximo, um e-mail por dia.