, , ,

Inserindo fotos/avatares aleatórios nos comentários do Blogger

por Sérgio Estrella 06/03/2009
Blogger Hacks 

O Blogger/Blogspot é uma grande plataforma, cheia de possibilidades, mas tem algumas sérias limitações, como a falta de fotos/avatares nos comentários (quando eles estão abaixo da postagem). Mas tudo bem, nós usuários resolvemos o problema! Assim como alguns blogs no WordPress possuem, vou mostrar a você como inserir avatares aleatórios nos comentários, que não dependem da intervenção do leitor e funcionam com qualquer conta (mesmo anônimo) e em todos as postagens, até nas anteriores ao hack. É só comentar que um avatar vai surgir automaticamente para o leitor, baseado numa lista de imagens previamente estabelecidas pelo blogueiro. Assim os comentários ficam mais interessantes de ler, responder, e dá até pra sacanear os comentaristas!

Para inserir fotos/avatares aleatórios ao lado do texto dos comentários, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template.

Então marque a opção Expandir modelos de widgets.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o seguinte código (utilizando o Ctrl+F do seu navegador):

<dd class='comment-body'>

Então cole o seguinte código DEPOIS: 

<div class='commentavatar' style='float: left;'>
<script language='JavaScript'>
//<![CDATA[
var quotes=new Array()
quotes[0]='<img src="http://URL_DA_IMAGEM1.jpg" />'
quotes[1]='<img src="http://URL_DA_IMAGEM2.jpg" />'
quotes[2]='<img src="http://URL_DA_IMAGEM3.jpg" />'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
//]]>
</script>
</div>

Substitua a parte em laranja pela URL de cada imagem. Caso você queira adicionar mais imagens ao escopo, cole mais uma linha quotes[X]='<img src="http://URL_DA_IMAGEM.jpg" /> abaixo da anterior, alterando a parte em verde pelo número seguinte ao da parte verde da linha anterior. Todas as imagens que você listar poderão aparecer nos comentários (em seu tamanho original, portanto utilize imagens com aproximadamente o mesmo tamanho).

Agora encontre este código (está logo abaixo de onde você inseriu o código anterior):

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

Então cole o seguinte código DEPOIS (e antes de </b:loop>): 

<div style='clear: both;'/>

Por fim, adicione ao seu CSS (ANTES do código ]]></b:skin>) o seguinte código:

.commentavatar {
padding: 5px 10px 0px 0px;}

Você também pode personalizar a formatação do avatar, colocando bordas, margens e outros atributos usando as dicas de CSS do hack Personalizando a exibição somente-títulos no Blogger.

Como esse hack funciona somente nas páginas de postagem individuais, não será possível visualizar diretamente o resultado. Então visualize apenas para checar se houve algum erro com o template e clique em Salvar Modelo. Em seguida abra uma postagem com comentários no seu blog para verificar o resultado.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

Referências:
UsuárioCompulsivo