Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508408623
Vida do cache: 1508451823
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 corpo da mensagem dos comentários (comment-body)

Você já viu como aplicar estilos ao comando que se refere ao nome do autor dos comentários, o “comment-author”.

[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]

Neste artigo vamos aprender a identificar e aplicar estilos ao comando que se refere ao corpo da mensagem dos comentários, o “comment-body”.
Para melhor entendimento deste tutorial, é necessário que você já esteja bem familiarizado com a sua área de comentários, se ainda não estiver, leia este artigo antes de prossseguir:
Desmembrando a Área de Comentários.

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


#comments-block .comment-body { /* se refere ao corpo geral da mensagem dos comentários dentro do container geral */
margin:.25em 0 0;
}

Para definir cores para plano de fundo ao corpo da mensagem dos comentários:

Acrescente este trecho no código:


background:#6495ED; /* ---edite a cor ---*/

Acrescente também, espaçamentos.
Devendo ficar assim:


#comments-block .comment-body {
margin:.25em 7px 2px;
background:#6495ED;
padding:10px 10px 10px 10px;
}

Para aplicar bordas, acrescente:
border: 1px solid #000;
Devendo ficar assim:


#comments-block .comment-body {
margin:.25em 7px 2px;
background:#6495ED;
padding:10px 10px 10px 10px;
border: 1px solid #000;
}

Você pode aplicar o efeito de Bordas arredondadas e o efeito sombreado.
Veja o resultado:

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


#comments-block .comment-body {
margin:.25em 7px 2px;
background:#6495ED; /* ---edite cor---*/
border: 1px solid #000;  /* ---edite borda---*/
padding:10px 10px 10px 10px;
-moz-box-shadow:5px 3px 10px #333;
-moz-box-shadow: 5px 3px 10px #333;
-webkit-box-shadow: 5px 3px 10px #333;
-khtml-box-shadow: 5px 3px 10px #333;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Lembre-se, este é apenas um exemplo, defina os estilos de acordo com as cores do seu template. Use a imaginação!

Personalizar a fonte do texto corpo da mensagem dos comentários:

Procure por:


#comments-block .comment-body p {
margin:0 0 .75em;
}

É neste trecho que você poderá definir as cores e o tamanho da fonte do texto.
Por exemplo:


#comments-block .comment-body p {
margin:0 0 .75em;
color:#000;
fonte-size:12px;
}

Se no seu template não tiver esta parte do código, acrescente-a e defina as cores e tamanho da fonte de acordo com seu gosto.

Um outro exemplo de personalização:

Digamos que você aplicou os estilos ao nome do autor dos comentários, de acordo com a imagem do “Exemplo 1” que expliquei no tutorial anterior, definiu cor de plano de fundo e borda arredondada, e queira definir a mesma cor de plano de fundo ao corpo da mensagem 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, devendo ficar assim:


#comments-block .comment-author {
margin:.5em 0;
padding:5px 5px 0px 5px;
background:#6959CD;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-radius:8px 8px 0 0;
-moz-border-radius:8px 8px 0 0;
-webkit-border-radius:8px 8px 0 0;
-khtml-border-radius:8px 8px 0 0;
}

#comments-block .comment-body {
margin: -.5em 0 0px;
background:#6959CD ;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom:1px solid #000;
}

Vejam o resultado:

Bom pessoal, agora é com vocês, eu não vou dar tudo mastigadinho, até porque o intuito deste tutorial é ensinar, fazer vocês entenderem este trecho da área de comentários e usarem a imaginação para vocês próprios conseguirem personalizar á maneira de vocês, de acordo com os seus gostos.
Portanto, mãos á obra!
O básico para o entendimento está ai, agora é só fazer testes, aplicar estilos e ver o resultado.

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.

11 Comentários

  1. BooOh disse:

    obrigado pela ajuda

  2. Roberto Araujo disse:

    oi Clau! ja estava quase para desistir!em uma procura, mas acabem achando algo bem melhor em seu blog…
    desde ja obrigado "Estilo nos comentarios"

  3. Felipe Neves disse:

    No meu template não tem #comments-block

  4. Amauri Dirrty disse:

    Ei Clau, simplesmente meu template não tem a parte pra editar comentatios. Quando eu escrevo Comments no buscador (cntrl+F)soh aparece o seguinte codigo:

    .post-outer .comments {
    margin-top: 2em;
    }

    e fica lah em posts e nada mais. Pode ver se pode me ajudar? Desde já grato pela atenção

    OBS.: Seu blog foi o melhor em tutoriais aprendi MUITO com você, parabnés.

  5. Caio Felipe disse:

    Parabens
    Esse site me ajuda muito com meu blog

  6. vegas disse:

    fantastico! mais uma que deu certo, quem quizer ver o resultado esta aqui
    http://teemgames.blogspot.com/2010/06/como-colocar-saves-no-xbox-360-pelo-pen.html

  7. .:: Clau ::. disse:

    Equipe blog
    Aconselho que vc primeiro aprenda mais sobre a área de cometários para conhecer melhor os códigos desta área. Dá uma lida no tutorial:
    "Desmembrando a Área de Comentários".
    Não tenho como te ajudar individualmente, pois para cada caso é um caso. Vc vai ter q fazer testes até ver se consegue deixar do jeito q vc quer.

  8. Equipe Blog disse:

    Olá. Primeiramente gostaria de elogiar o seu Blog. É organizado e ajuda muito os novos usuários. Eu estou tentando modificar a caixa onde aparece os comentários dos meus visitantes mas não estou conseguindo. Já tentei procurar os lugares em que poderia estar o código mas não achei. Tem como você me dar uma ajuda nisso?

    Meu blog é http://www.brunoarita.blogspot.com
    Ficarei muito agradecido.

    Grande abraço.

  9. Yorgan disse:

    bom artigo esse ai!

    tenho um pedido a fazer mas nao sei se da para vc's atenderem…

    mas aqui vai…

    é o seguinte:

    eu gostava de colocar um slider igual ao que esta neste site ( http://www.baixetudodownloads.com/ ) mas nao sei como…se desse para colocarem um tutorial a ensinar como se faz era mt bom.

    obrigado

    e continuem com o excelente trabalho que têm realizado. eu já tenho uma data de posts vossos nos favoritos pois são muito úteis e ajudam-me mt no meu novo projecto de designer.

    obrigado mais uma vez 😉

  10. ::Clau:: disse:

    @Arierom:
    Nos templates designer de modelo, vários trechos são diferentes mesmo…o jeito é tentar localizar códigos parecidos e ir testando.
    Obrigada pelo comentário.

  11. Arierom disse:

    Clau,

    aguardei com expectativa este post. Meu template atual é o "Simple de Josh Peterson", e não foi possível identificar onde realizar um acerto de fonte/cor nos comentários que está alterado, provavelmente depois de algum "adereço técnico" que realizei quando troquei o velho mínima.
    Há sínteses de marcação diferentes.

    Mas o meu caso não invalida o seu didático artigo, parabéns!

    @BlogdeTaro

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

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