SAPO Blogs

Quando o blog oficial do Estoril Open foi lançado, em Abril, alguns dos nossos utilizadores perguntaram-nos como é que podiam recriar nos seus blogs o mesmo efeito de transparência utilizado no template. Na altura, respondemos que tal não era possível sem um editor de imagens e alguma dose de complicação.

Como esse foi um pedido recorrente, estivemos a trabalhar em algo que permitisse a qualquer utilizador ter aquele efeito de transparência no seu blog. Chamámos-lhe, talvez de forma não muito original, o template transparente.

As instruções para instalá-lo encontram-se no blog Templates do Sapo e incluem a explicação de como é possível mudar a imagem de fundo

Podem deixar as vossas dúvidas, sugestões ou pedidos nos comentários, aqui ou no Templates.

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:

Esta vai ser a nova funcionalidade preferida.

Pois é, depois de MUITO trabalho e pesquisa e desenvolvimento, lá conseguimos arranjar uma forma de vos permitir a edição do CSS .

Eu sei, não é o html puro e duro, mas com o CSS , já podem controlar a maior parte das coisas que querem controlar (assim de repente lembro-me das fontes, dos tamanhos, das cores, etc. , etc. , etc. ).

Podem lá chegar e experimentar, a partir da Personalização Avançada.

Digam de vossa justiça, e reportem eventuais bugs .