Personalizar o rodapé dos comentários (comment-footer)

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Dando segmento á série: Desmembrando a Área de Comentários, neste tutorial veremos como personalizar o trecho referente ao rodapé do comentário dentro do bloco de comentários, o “comment-footer”.

Nos templates padrões (minima) e na grande maioria dos templates, os estilos CSS para o rodapé dos comentários se apresentam da seguinte maneira:

#comments-block .comment-footer {
 margin:-.25em 0 2em;
 line-height: 1.4em;
 text-transform:uppercase;
 letter-spacing:.1em;
 }

[alerta]Atenção: O sistema de comentários do Blogger mudou! A eficácia da dica aqui apresentada não se aplica ao novo sistema de comentários. [/alerta]

Por padrão, a data e hora dos comentários que aparecem no rodapé, se apresentam em letra maiúsculas. Isto porque a propriedade “text-transform: uppercase;” define que todas as letras sejam maiúsculas.
Se você quiser retirar este efeito, basta substituir “uppercase” por “none“.

Personalizar cor de fundo para a linha do rodapé do comentário:

Se, por exemplo, você quiser aplicar uma cor de fundo (background), ao rodapé do comentário, esta cor será aplicada a toda a linha.
Acrescente ao código, o trecho referente a background e ao espaçamento (trecho que estão destacados em vermelho):

#comments-block .comment-footer {
 margin:-.25em 0 2em;
 line-height: 1.4em;
 text-transform:none;
 letter-spacing:.1em;
background:# 6495ED; /* ---edite a cor ---*/
padding:5px 5px 5px 5px; /* ---edite as medidas ---*/
 }

O resultado será este:

Se quiser aplicar bordas, acrescente:

border: 1px solid #000; /* ---edite a cor e tipo da borda---*/

Você pode aplicar o efeito de Bordas arredondadas.
Uma dica: recomendo que use o efeito Bordas arredondadas somente nas esquinas do rodapé.

Veja com o efeito de bordas arredondadas como fica:

Eu usei este código para definir os efeitos acima:

#comments-block .comment-footer {
 margin:-.25em 0 2em;
 line-height: 1.4em;
 text-transform:none;
 letter-spacing:.1em;
background:#6495ED; /* ---edite a cor ---*/
padding:5px 5px 5px 5px; /* ---edite as medidas ---*/
border: #000 1px solid; /* ---edite a cor e tipo da borda---*/
padding: 10px;
border-radius:0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
 }

2. Um outro exemplo de personalização:

Digamos que você já tenha aplicado uma cor de fundo (background) ao trecho referente ao corpo da mensagem dos comentários, o “comment-body” , definiu cor de plano de fundo e borda arredondada, e queira definir a mesma cor de plano de fundo e incluir bordas arredondadas ao rodapé para que tudo pareça um bloco só.
Para dar um visual melhor, você pode alterar os trechos referente ás bordas no código do tutorial anterior sobre o comment-body, devendo ficar assim:

Eu usei este código para definir os efeitos acima:

#comments-block .comment-body {
margin-bottom:-.5em;
padding:5px 5px 5px 5px;
background:#912CEE; /* ---edite a cor ---*/
border-left: 1px solid #000; /* ---edite a cor e tipo da borda ---*/
border-right: 1px solid #000; /* ---edite a cor e tipo da borda ---*/
border-top:1px solid #000; /* ---edite a cor e tipo da borda ---*/
border-radius:10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
 }
#comments-block .comment-footer {
line-height:1.4em;
margin:-10px 0 0px;
text-transform:none;
background:#912CEE; /* ---edite a cor ---*/
padding:0px 5px 5px 5px; /* ---edite as medidas ---*/
border-left: #000 1px solid; /* ---edite a cor e tipo da borda---*/
border-right: #000 1px solid; /* ---edite a cor e tipo da borda---*/
border-bottom: #000 1px solid; /* ---edite a cor e tipo da borda---*/
border-radius:0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
 }

Personalizar o link da data e hora do comentário:

A data e hora do comentário é um link, e você pode personalizar este trecho também, alterando a cor e tamanho da fonte. Para isto basta aplicar os estilos, acrescentando os seguintes códigos:

.comment-timestamp, .comment-timestamp a
{
color:#ffffff; /* ---edite cor da fonte---*/
font-size:10px; /* ---edite tamanho da fonte---*/
}

Veja o resultado:

Por padrão a data e hora do comentário estão posicionados do lado esquerdo, mas você pode alterar o posicionamento se quiser, basta acrescentar:
float:right;
ao código acima.

Lembre-se, os estilos que apliquei nos códigos acima são apenas exemplos, defina os estilos de acordo com as cores do seu template. Use a imaginação!

Com isto encerramos a série: Desmembrando a área de comentários do blogger.
Com todos os tutoriais publicados desta série já deu para você entender bem melhor como funciona esta parte do trecho na área de comentários do seu blog, agora é só usar a imaginação bem direitinho e ir personalizando de acordo com seu gosto.

Para relembrar, segue a lista dos tutoriais desta série que já foram publicados:

1. Desmembrar a área de comentários
2. Personalizar Container geral de comentários “comments-block”
3. Personalizar nome do autor dos comentários “comment-author” ((não funciona no Designer de Modelo))
4. Personalizar o corpo da mensagem dos comentários “comment-body” ((não funciona no Designer de Modelo))
5. Personalizar o rodapé dos comentários “comment-footer” ((não funciona no Designer de Modelo))

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn