Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1503007350
Vida do cache: 1503050550
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Tutoriais Blogger

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

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))



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

9 Comentários

  1. jardelnunes - ManiacoMarrento disse:

    cara , saca la no meeu blog os comments
    eu gostaria de retira aquele links para esta postagem :S

  2. H1TL3R disse:

    Olá clau!

    Tive um pequeno problema na hora de personalizar o footer dos meus comentários :/

    o .comment-timestamp não responde ao comando "color: #000000;" ja verifiquei a tag.. está correta, mas msm assim não responde, ele responde ao comando "float: right" mas não ao color… na hora que pesquisei pela tag "comment-timestamp" aparecem duas tag, dentro do comando "span" mudei o nome de uma para testar, tbm não deu certo. Tentei colocar em vez do "." o "#" eh nada.. se puder me ajudar.. ficarei mto agradecido… :]

    Bjoss… Sou seu fã S2!

    "Os grandes guerreiros numca caem, apenas se ajoelham e se levantam ainda mais fortes."

    By: H1TL3R (holocaustocanibal.webs.com)

  3. Felipe Correia disse:

    Otima série, eu li todos os tutorias, e deixei a area de comentarios do meu blog bem legal (para o meu gosto) muito Obrigado!

  4. Kevvin Oliveira disse:

    Belo artigo! Parabéns!

  5. Max Martins disse:

    Clau

    Muito, mas muito obrigado mesmo.
    Como é bom deixar o blog como a gente quer.
    Falta ter o mesmo conhecimento que tu, mas com a tua ajuda a gente dá um pouco de personalidade ao nosso cantinho.

    Abraços

  6. .:: Clau ::. disse:

    Say
    Que texto seria?
    Se vc quiser informações sobre licenças existentes, te indico a leitura deste artigo publicado no Blogosfera Legalizada:
    Tipos de licença Creative Commons

  7. Say disse:

    Boa noite!

    Gostaria de saber se posso copiar uma parte do seu texto que fala sobre Linceça para colocar no blog. Aguardo retorno
    obgda

  8. .:: Clau ::. disse:

    Lucas
    Tente colocar "display:none;" nos trechos que vc quer ocultar.

  9. Lucas disse:

    Clau,o que preciso fazer para ocultar a data e a hora ns comentàrios?

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.