Blog de Plantão: Aprenda a colocar avatar nos comentários do blogger

Vamos aprender a colocar nos comentários do Blogger o seu avatar de perfil.Para que o avatar da pessoa apareça, ela necessariamente precisa ter uma conta no Blogger, ou seja, um blogspot.

A imagem que será exibida no comentário da pessoa, será a imagem que ela definiu no perfil do Blogger.

Para você fazer uso desta opção no seu Blogger, você precisa fazer algumas alterações no código do seu template, mas lembrando sempre de fazer o backup do template para caso aconteça algum eventual problema.

Vamos ao processo de ativação dos avatares nos comentários do Blogger.
Se você é um novo usuário do Blogger, é bem provável que esse recurso já esteja funcionando normalmente, basta que você mude as configurações no Painel do Blogger para ativar.

Para saber se o seu blog vai precisar de modificações no código-fonte ou não, abra o painel do Blogger e clique no menu “Configurações” e “Comentários”:

Role a página até achar a opção “Mostrar Imagens de Perfil nos Comentários?”, conforme mostra a imagem abaixo, e clique em “Sim”, lembrando de salvar as modificações:

Navegue em seu blog e verifique se os comentários estão mostrando alguma imagem ao lado deles, senão tiver nenhum comentário no seu blog, faça um comentário para você testar.Lembre de utilizar a sua conta do Blogger na hora de comentar, seleciona "conta do google" na hora de comentar.

Caso sua imagem não apareceu, você vai precisar fazer umas modificações no código fonte do seu template.

Adicionar o código:

Primeiramente faça o Backup do seu template. O mais recomendável seria utilizar um blog teste para você aprender a fazer essas modificações.

Vá ao menu “Layout” , “Editar HTML” e marque a opção “Expandir modelos de Widgets” para poder visualizar o código-fonte de seu blog por inteiro. Agora procure pelas linhas semelhantes a essas em seu código:

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

O que está marcado em verde é para você saber a posição das linhas no seu template. Tudo o que está marcado de vermelho será trocado pelo novo código que faz os Avatares funcionarem.

Então, identifique o que destaquei em vermelho e troque inteiramente pelo novo código que segue. É grande e não altere nada nele, NADA:

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

Agora clique no botão "Salvar Modelo" e veja o resultado final no seu blog.

Nota: Será exibido avatar de quem tem conta no google do blogger, caso para as outras opções de postagem eu vou ensinar em outra matéria como exibir um avatar padrão para quem não possui conta do blogger. Isso elimina o espaço em branco ao lado do comentário para quem não tem a conta no blogger.

Obrigado, e até a próxima matéria.

Fonte: ferramentas blog, pois foi a melhor informação que encontrei.