Fotos nos comentários do blogger

Mostrar imagens de perfil nos comentários do blogger é um recurso bastante interessante e que tem sido importante para dar um diferencial para nossos blogs. Este recurso torna muito mais atrativo nossos blogs, o que é bom para nossos leitores e consequentemente para nós.

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.

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

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!

Adriano Luz: Pós-graduado em Sistemas de Informação e Banco de dados, atualmente atua com consultoria em sistemas, SEO e marketing digital. Amante por blogs, é responsável pela administração do blog Publicidade na web.