Mostrando a foto do comentarista ao lado do comentário no Blogger

 

Em tempos de Web 2.0 é difícil acreditar que o Blogger/Blogspot ainda não exibe as fotos dos comentaristas nos comentários abaixo da postagem. Comentários com apenas textos são cansativos pra ler e perdem personalidade, sem contar que não incentivam as pessoas a comentarem. Com este Hack, você vai aprender a colocar as fotos dos comentaristas ao lado do texto do comentário, quando estes aparecem abaixo da postagem. O Hack é uma tradução e atualização do tutorial original do blog espanhol Vagabundia.

Este Hack utiliza um arquivo JavaScript externo. O uso excessivo de scripts no seu blog pode torná-lo lento. Portanto, não exagere!

Para mostrar as fotos dos comentaristas ao lado do texto dos comentários, faça o seguinte:

Antes de qualquer coisa, você deve fazer o download deste script (clique com o botão direito e escolha Salvar link como...).

Abra o arquivo baixado num editor como o Bloco de Notas e encontre este código (utilizando o Ctrl+F do Bloco de Notas):

BloggerProfiles.noimage = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgosKUdpudwBBoG8PYX1LCigoXgww1vqWtDqbsy006HFZA_36nEuvQdgr_IcMGkj2LewPvrucPm4B4DDBZkFkpyXb7yZtyp2LuypDJxbSpsRweT5Y7WO2AsbWjt5fBlvrQj5SIumMJN5UI/s144/icebreaker_noimage.png';

Altere a parte em verde pela URL da imagem que será exibida para quem não comentar usando um perfil do Blogger. Você pode criar a imagem (que deve ter resolução de 60x60 pixels) ou fazer o download de uma das imagens abaixo (clique com o botão direito e escolha Salvar imagem como...).

   

Com a imagem pronta, hospede-a num servidor como o Picasa e utilize a URL da imagem para substituir o código em verde acima. Após fazer a alteração no código, hospede o arquivo do Script em um servidor como o Yahoo! GeoCities e anote a URL.

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

</head>

Então cole o seguinte código ANTES: 

<!—Script Fotos nos Comentarios iceBreaker http://www.icebreaker.com.br/ -->
<script src='http://url_do_script.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

Substitua a parte em laranja pela URL do seu arquivo de script que você anotou na Etapa 2.

Agora encontre este código:

<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>

Então cole o seguinte código DEPOIS: 

<div class='commentphoto' style='float: left;'/>

Em seguida, encontre este código:

<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

Então cole o seguinte código DEPOIS: 

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

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

.commentphoto {
padding: 5px 5px 0px 0px;}

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.