sexta-feira, setembro 25, 2009

Personalizando avatar nos comentários de templates convertidos (Wordpress para Blogger)

Caso seu template tenha sido feito a partir de algum modelo original do Blogger, use o primeiro tutorial: Personalizando o avatar nos comentários.

Alguns leitores já estavam reclamando problemas para personalizar o avatar nos comentários por usarem templates Wordpress convertidos para Blogger. Eu estava sem tempo para ver melhor isso, até que resolvi ativar o recurso de avatar em um dos blogs que administro e que usa template Wordpress convertido. Vou partilhar aqui os códigos que resolveram a minha situação.

1 :: O código na tag

Há aqueles que nem chegam à parte de personalização do avatar porque não conseguem encontrar o local correto de inserir o código na tag, já que sem esse código o avatar pode até aparecer, mas você vai ter dez vezes mais trabalho para ajustá-lo decentemente.

Se o template que você usa mostra os comentários numerados sem você ter adicionado nenhum código para isso, é muito provável que, quando expandir modelos de widgets, ao invés do seguinte código:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

Você encontre esse:

<ol class='commentlist'>
<b:loop values='data:post.comments' var='comment'>

Ou ainda:

<ol class='commentlist' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

Caso já tenha estudado sobre listas, você percebeu que no primeiro código (padrão do Blogger) é utilizada uma lista de definição, enquanto nos dois últimos é utilizada a lista numerada, por isso os comentários são numerados sem nenhum script extra.

O mais importante é entender que a primeira modificação no código, como o IceBreaker mostrou, deve ser feita nessa tag <ol>. Então o seu código, independente de qual dos dois seja, deve ser substituído por:

<ol class='commentlist' id='comments-block' expr:class='data:post.avatarIndentClass'>
<b:loop values='data:post.comments' var='comment'>

2 :: O código do avatar

Com esse código não há muito problema, basta inserí-lo imediatamente acima da linha de código que diz:

<b:if cond='data:comment.authorUrl'>

Então fica:

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>

3 :: Folha de estilos

O código da folha de estilos muda também. Segue um exemplo que você terá que ajustar até ficar tudo encaixado no seu blog. Esse código já tem todas as modificações esmiuçadas no tutorial anterior: tamanho, imagem alternativa, borda, margem e espaçamento.

#comments-block .avatar-image-container {margin:0px; padding:0px; padding-left:10px; padding-right:0px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN48hp_YD2dzRw-VeoN0Hsy0Xf7qW_6lIcKS0j3Z-k2KUbBNAHdK7qZKkvGbRPy6tOmgAIHSWjturMfOXltgxnLZJXpFjVwN-m3_luDdMYJlcy-8PvLJcp1lzSst8AXi9nwv4Wur7Xg2KS/s800/avatar-vovo55.jpg) no-repeat center center; width:55px; height:55px;}

#comments-block .avatar-image-container img {display:none; border:0px; width:55px; height:55px; padding-top:0px; padding-left:-10px;}

#comments-block .avatar-image-container img.delayLoad {display:block; margin:0px; width:55px; height:55px;}

]]></b:skin>

A imagem desse código de exemplo é a vovozinha desse primeiro comentário. O print é do blog onde todos os códigos deste post foram aplicados:

Exemplo

Até mais!

Pix meutedio arroba mail ponto com

12 comentários:

  1. Foi extamanete o que eu fiz! Tive que descobrir isso pois nada certo. Agora que sei onde ficam os códigos clareou tudo aqui.

    Marco Damaceno

    ResponderExcluir
  2. Já havia testado outros códigos, mas sinceramente não tinham resultado.
    Pensei em desistir :P e encontrei este código que funcionou na perfeição, só excluí a parte do CSS que não achei necessária...mas o importante é que funcionou!

    Obrigado mais uma vez ;)

    ResponderExcluir
  3. Valeu, mas a foto do meu ficou em cima do comentario.

    Mas ajudou bastante valeu

    ResponderExcluir
  4. Aqui deu certo, porém, vale avisar que o pessoal tem que prestar atenção na linha:

    "< ol class='commentlist' id='comments-block' expr:class='data:post.avatarIndentClass' >"

    Se a linha que já está no seu blog começar com DL, mude a linha acima pra DL ao invés de OL.

    ResponderExcluir
  5. Elhazzar, você tem um blog? Ele tem comentários? Qual é o link?

    ResponderExcluir
  6. Comigo deu tudo certo exceto que não aparece a minha foto (autor) nos comentários.

    ResponderExcluir
  7. onde eu coloko esse codigo? na pag editar html?

    ResponderExcluir
  8. O meu aparece os números e o comentário, mas o local da foto aparece em branco :(
    portalmeraki.blogspot.com

    ResponderExcluir
  9. como eu faço para retirar o número?

    ResponderExcluir
    Respostas
    1. Tenta isso:

      div.comment-thread ol li {list-style-type:none;}

      Excluir

Todos os comentários são moderados pela autora do blog.