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 + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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='"comment-body " + 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='"comment-author " + 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...
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
valeu
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
Muito bom ….. fico bem legal….
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!!
Não tem isso no meu blog o que eu faço?
funcionou aki
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^^
@Ricardo,
Eu não ensinei a trocar a imagem azul não? certeza?
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.
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
acho incrivelmente complicado mexer com HTMLs, mas vou tentar, e passo aki qdo fuincionar.
Não consegui encontrar as tags no meu blog não!
Muito bom!!
vou testar no meu blog a ver como fica.
Obrigado pela dica.
abraço
Eu fiz ficou bom, mas com personalizar a caixa de comentários como vc fez no seu blog?
Valeu
vlw!
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
Muito obrigada pelas dicas!
Sucesso
todos os comentarios ficam azul, como fazer os comentarios do autor ficar de outra cor?
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.
Olá, você poderia me explicar como posso trocar a cor, de azul para outra?
meu email: arthuroarujo.blogspot.com
blog: arthuroarujo.blogspot.com
Obrigado 😉
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 ^^
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
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,
@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
Não achei esse codigo para substituir! me ajude? meu site e canseideserpop.com obg
Consegui mais tem como mudar a cor?
@Izabelle,
tem sim, é só usar "color:" no CSS.
abraços
só preciso da dica
como faço pra botar na lagura 900px?
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 !!!
ai cara eu queria uma caixa de comentários igual a sua vc sabe fazer !! mim responda !
É WordPress? No Blogger não dá.
abraços
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!
Olá Cláudia,
poderia me dizer qual o erro que está dando?
abraços
Olá, gostaria de saber como faço para exibir primeiro os comentários mais recentes no blogger. Obrigado.