Vale a pena ressaltar que este avatar tem a finalidade de mostrar nos comentários as imagens de perfil, portanto, quem não configurou sua imagem no perfil não irá ter sua foto exibida nos comentários (no lugar, fica um simbolo do Blogger). Se quiserem mais informações sobre as configurações do Blogger leiam a série Como criar um blog.
Hoje vou ensinar como fazer esta personalização, que não é complicada e ajuda bastante.
Como adicionar as imagens de perfil nos comentários blogger para blogs novos Para quem acabou de criar uma conta no blogger, é ainda mais fácil, pois não precisa fazer alterações no fonte. Acesse sua conta do blogger, vá em Configurações – Comentários
Nesta janela, você encontrará a opção Mostrar Imagens de perfil nos comentários, basta colocar SIM e verificar o resultado em seu blog. Caso não tenha mudado nada, você precisará fazer as próximas etapas desta postagem.
Como adicionar imagens de perfil nos comentários blogger para blogs antigos Acesse sua conta no blogger, vá em Layout – Editar HTML e clique em Expandir modelos de Widgets. Obviamente você deverá fazer antes um backup, assim como qualquer outra alteração que faça em seu código fonte. Agora procure um trecho de código igual ou semelhante ao que segue abaixo. Para isso, você pode utilizar a busca do navegador Ctrl+F.
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<div class='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:include data='comment' name='commentDeleteIcon'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><b><data:comment.author/></b></a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
<p><data:comment.timestamp/></p>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</div>
</b:loop>
</dl>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
Os trechos que estão em vermelho permanecerão no código fonte. Já o trecho que encontra-se sem destaque e entre os trechos em vermelho, serão substituídos pelo código abaixo para que possam ser exibidas as imagens de perfil nos comentários do seu blog.
<!-- Inicio do codigo -->
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<div class='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 class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></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>
</div>
</b:loop>
</dl>
<!-- Final do codigo -->
Basta clicar no botão Salvar Modelo e visitar seu blog para ver o resultado. Esta aplicação será feita para todos os comentários nvoos e também para os comentários que seu blog já possuia.
E você, gostou? Então siga-nos!
04:19
Adriano Luz
Postado em: Blogger / Blogspot
