» » Inserindo fotos ou avatares aleatórios nos comentários do blogger.

Dicas Blogger 22:25
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 emEditar HTML para entrar no modo de edição do código do seu Template.

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 linhaquotes[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;}
Como só 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.
author

Este post foi escrito por: Matheus Ribeiro

Sou especialista em blogs e sites desde 2010, tento trazer conteúdos que os leitores procuram na internet.

Postado por Matheus