Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1506116117
Vida do cache: 1506159317
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 Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Blogger Comentários

Personalizando os comentários no Blogger

Hoje vamos aprender a personalizar os comentários das postagens. De forma que fique organizado estruturalmente para facilitar modificações. Isso da mesma forma que fiz aqui no Códigos Blog.

Antes de tudo quero dizer que é bom você fazer backup do template e que essa modificação é feita diretamente da página “Editar HTML”, não é aceita (eu acho, nunca testei pra falar a verdade) no Design de Modelo (nova forma de fazer seu template).

Pretendo desenvolver vários modelos e disponibilizar aqui no Códigos Blog, então o modelo de hoje é esse da imagem abaixo:


1 – Entre em “Editar HTML”.

2 – Marque a caixa “Expandir modelos de widgets

3 – Procure (Ctrl + f) por:

<div  expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId +  &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

Substitua tudo por:

<ol class='commentlist' style='margin:  0; padding: 0;'>
<li class='comment' id='comment'>
<b:loop values='data:post.comments' var='comment'>
<div class='comment-body' id='div-comment'>
<div class='comment-author'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img class='avatar' expr:src='data:comment.favicon' height='32px' width='32px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<span class='says'>diz:</span>
</dt><span style='float: left;'><b:include data='comment' name='commentDeleteIcon'/></span><a expr:href='data:comment.url' style='float: right; margin: -8px 5px 0 0;' title='Link para esse comentário (permalink)'><img src='http://codigosblog.net/servidor/imgcomentarios/permalink.gif'/></a>
</div>
<div class='comment-meta commentmetadata'>
<data:comment.timestamp/>
</div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:loop>
</li>
</ol>

4 – Cole o seguinte código CSS ANTES de ]]></b:skin>:

.commentlist {padding: 0;text-align: left;}
.commentlist li {margin: 5px 0 0 0; padding: 0;list-style: none;}
.commentlist li ul li { margin-right: -5px; margin-left: 10px;}
.commentlist p {margin: 10px 5px 10px 0;}
.children { padding: 0; }
#commentform p {margin: 5px 0;}
.nocomments {text-align: center;margin: 0;padding: 0;}
.commentmetadata {margin: 0;display: block;}
.post_thumbnail {padding: 6px; background: #fff; border: 1px solid #ddd; margin: 0 10px 10px 0;}
h3#comments, h3#respond_title {margin: 0 0 2px 0; font-size: 14px; color: #000; font-width: normal; padding: 0;}
.avatar-image-container {
float: left;
padding: 3px 3px 0px 3px;
border: 1px solid #ccc;
margin: -5px 8px 0 0;
}
.comment-body {
margin: 0 0 10px 0;
padding: 4px 4px 0 4px;
background: #f0f0f0 url(http://codigosblog.net/servidor/imgcomentarios/commentbody.jpg) repeat-x;
text-align: left;
}
.comment-body p {
padding: 8px;
color: #4f4f4f;
font-size: 12px;
text-align: left;
}
.comment-author {
font-size: 15px;
color: #fff;
font-width: bold;
margin: 5px 0 0 0;
}
.comment-author a{
color: #fff;
}
.comment-meta {
font-size: 12px;
color: #fff;
}

O código acima em CSS pode ser modificado, basta trocar a imagem (http://codigosblog.net/servidor/imgcomentarios/ commentbody.jpg), cores, tamanhos, etc.

Não tenha medo de testar! Testar é a melhor forma de aprender HTML. (Cansado de dizer isso, mas é a mais pura verdade).

Até mais...



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:

37 Comentários

  1. Bruno Gall disse:

    Você tem razão, sem os testes nós blogueiros não seriamos nada, gostei do tutorial, parabens por mais uma super dica.
    Abraços

  2. Raphael disse:

    Funcionou direitinho no meu PH Miniaturas. Mesmo eu não tendo localizado a totalidade do código indicado, porque o meu template (Smash) é um pouco diferente, é daqueles WP-bloggerizados.

    Procurei pelo loop values='data:post.comments' e meti a cara e apaguei tudo que estava por perto até chegar no /ul que tinha sido aberto lá. Eram coisas que não sabia se deveria apagar. Mas deu certo, foi um palpite bem sucedido.

    Só que a imagem de fundo dos comentários (commentbody.jpg) não apareceu. Levei um tempo para descobrir que é porque a URL está errada no texto do código. Tem um espaço em branco onde não deveria.

    http://codigosblog.net/servidor/imgcomentarios/ commentbody.jpg

    O correto é sem o espaço, ficando assim:
    http://codigosblog.net/servidor/imgcomentarios/commentbody.jpg

    Agora aparece direitinho.

    Obrigado por mais este código sensacional!

    Twitter: @phminiaturas

  3. Caio disse:

    Muito bom ….. fico bem legal….

  4. Ricardo disse:

    Parabéns Consegui Fazer certinho !!!

    Mas vc Poderia explicar como mudar a Cor dessa imagem azul e Tals..

    Ficaria Nota 100

    mas fiko mito Show ti dô Nota 95!!

  5. Usaniaalves disse:

    Não tem isso no meu blog o que eu faço?

  6. tecnologia e outros disse:

    funcionou aki

  7. link disse:

    humm, não consegui T.T, pode me dizer por quê? eu fiz tudo certinho, procurei por algumas linhas, para ver se achava o resto, mas nem isso apareceu, dei C+f, e não achei o código, imagina substituí-lo??? me ajude please, abraços, espero contato^^

  8. Paulo Estevão disse:

    @Ricardo,
    Eu não ensinei a trocar a imagem azul não? certeza?

  9. ●๋•wểکlểý ΒΔΞ●๋• disse:

    Paulo Estevão o Ricardo tem razão você não ensinou a mudar as coisas não so disse que nois poderia mudar as cores a imagen e tals mas as cores eu não consegui nem o tamanho de largura dessa imagen.

  10. ●๋•wểکlểý ΒΔΞ●๋• disse:

    Me Ajuda ai olha no meu como fikou
    http://www.foxdosgames.com/2010/09/download-f1-2010-region-free-xbox-360.html#comments

    eu não to conseguindo diminuir o tamanho dele

    MEU MSN: wesley.2110@hotmail.com

  11. Dilly* disse:

    acho incrivelmente complicado mexer com HTMLs, mas vou tentar, e passo aki qdo fuincionar.

  12. Paullo M. Tavares disse:

    Não consegui encontrar as tags no meu blog não!

  13. pentedois disse:

    Muito bom!!

    vou testar no meu blog a ver como fica.

    Obrigado pela dica.

    abraço

  14. Francisco Alves disse:

    Eu fiz ficou bom, mas com personalizar a caixa de comentários como vc fez no seu blog?

  15. COMPRAS ONLINE disse:

    Valeu

  16. Moderador disse:

    Amigo gostaria de uma ajuda. Coloquei os códigos no meu blog, mas o problema ficou na data e no horário. A cada comentário, a data e o horário ficam em cima da outra no primeiro comentário, ambos não acompanham os comentários abaixo. Gostaria de uma solução para isso. Seria possível? Obrigado

  17. nemacharmosa disse:

    Muito obrigada pelas dicas!
    Sucesso

  18. netodebarros disse:

    todos os comentarios ficam azul, como fazer os comentarios do autor ficar de outra cor?

  19. Arthur Oliveira disse:

    Funcionou legal, mas o código que tinha que substituir eu não achei, apaguei um e tentei a sorte, deu certo!

    Muito bom. gostei do blog.

  20. Arthur Oliveira disse:

    Olá, você poderia me explicar como posso trocar a cor, de azul para outra?

    meu email: arthuroarujo.blogspot.com
    blog: arthuroarujo.blogspot.com

    Obrigado 😉

  21. Spring disse:

    Ae Paulo Parabéns, já coloquei no meu blog.;

    Mais tipo os comentários estão passando da caixa de
    comentários e indo embora pra lá "em linha reta" >>>>>>>>
    ao invés de obedecer a quebra de linha, que éh o normal.
    Se é que você me entende =/..

    Como se resolve esse bug?

    Valeu Garoto ^^

  22. Juliana Buzzatto disse:

    Olá estou criando um blog de vendas e a parte dos comentários está horrível, não consigo nem colocar espaço entre um comentário e outro.
    Tentem achar esse código mas não achei no meu template.

    Blog afetado: lojadocecereja.blogspot.com

    Obs.: Deixei 4 comentários de teste.

    Obrigada

  23. Aleksander D.L disse:

    não consegui fazer uma caixa de comentarios igual a sua, tipo coloquei como tu disse antes das tag ,

    quando vc fala para procurar no crtl +f , colocando esses códigos no meu não vai , ele nao acha, a não ser que eu tirar as crazes e tudo mais, existe outra maneira de encontrar esses codigos mais fácil,

  24. Paulo Estevão disse:

    @Aleksander,
    isso varia de template pra template, você tem que conhecer um pouco dos códigos do Blogger.
    Não existe modo mais fácil. =/
    abraços

  25. Izabelle Caroline disse:

    Não achei esse codigo para substituir! me ajude? meu site e canseideserpop.com obg

  26. Izabelle Caroline disse:

    Consegui mais tem como mudar a cor?

  27. Paulo Estevão disse:

    @Izabelle,
    tem sim, é só usar "color:" no CSS.
    abraços

  28. Everson Oliveira disse:

    só preciso da dica
    como faço pra botar na lagura 900px?

  29. Robson Andrade disse:

    ai Paulo Estevão Eu queria uma caixa de comentários igual essa sua !!! por favor mim ajude diga cria e coloca no blog !!! esperando sua resposta !!!

  30. Robson Andrade disse:

    ai cara eu queria uma caixa de comentários igual a sua vc sabe fazer !! mim responda !

  31. Olá querido; eu adoraria usar este tipo de comentário no meu blog, acho-o perfeito. Mas mesmo depois de um dia inteiro tentando, revisando o código, não consegui achar o erro e ele continua a não funcionar. Por favor me ajude, se há algo que preciso fazer me deixe saber…Agradecia.

    Obrigada!

  32. Dúvida disse:

    Olá, gostaria de saber como faço para exibir primeiro os comentários mais recentes no blogger. Obrigado.

Para enviar seu comentário, preencha os campos abaixo:

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