Como instalar o Threaded Comments, sistema de resposta em comentários no Blogger

O Blogger lançou recentemente um novo sistema de comentários para a plataforma. Agora é possível responder comentários, criando uma grade de conversação em cada comentário.

O sistema ainda é novo e ainda contém alguns bugs, todavia se for corrigido o principal bug com um script que vou ensinar, é possível usar o Threaded Comments sem maiores problemas.

• Alguns bugs no Threaded Comments, novo sistema de comentários do Blogger

Também devo avisar que a maioria dos estilos CSS dos seus comentários serão perdidas, ou seja, vai mudar um pouco ou completamente a forma que é exibido os comentários em seu blog. Uma nova configuração CSS deve ser feita caso você queira fazer alguma alteração no layout dos comentários.

Para ativar o novo sistema em seu blog, siga o tutorial:

Faça backup do template (Fazer backup / Restaurar), caso aconteça algum erro ou você não goste do novo sistema, é só você voltar o código antigo.

1) Faça login no Blogger, entre em “Configurações” -> “Postagens e Comentários”. Em “Local do comentário” escolha a opção: “Incorporado”. Depois clique em “Salvar Configurações”.

Entre em alguma postagem sua com comentário e veja se a opção de responder comentários foi ativada. Caso ainda não apareça em seu blog, continue o tutorial. Se já apareceu em seu blog vá para a parte de correção do sistema logo no final da postagem.

2) Agora entre em “Modelo” -> “Editar HTML”. Marque a caixa “Expandir modelos de widgets”.

3) Procure (Ctrl + f) por:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>

Obs.: Em alguns templates o código acima vai ser encontrado mais de uma vez, substitua todos pelo código abaixo. 

4) Substitua o código encontrado por:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

Código inserido no template

5) Salve as modificações em “Salvar modelo” e acesse uma postagem que já tenha um comentário, veja se o botão “Responder” foi inserido. Caso sim, prossiga.

Correção do bug rolagem (scroll) da tela

Esse problema acontece no Firefox e Internet Explorer em postagens que já contém comentários. Ao clicar no título de uma postagem, a postagem é carregada e a tela é deslocada para baixo, em vez de ir para o topo da página.

Uma solução provisória até que o Blogger solucione o problema foi desenvolvida pelos meus amigos, Claudio Sanches e Fernando Jorge do Ferramentas Blog.
Ainda em edição do seu template (Editar HTML) cole o seguinte código ANTES de </head>:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
document.body.onload = window.onload = function() {
var links = document.getElementsByTagName('a');
var h = window.location.hash.substring(1);
var cont = true;
for(var c=0;c<links.length && h && cont;c++){
if(links[c].name == h){
var x = links[c].offsetLeft,y = links[c].offsetTop,el=links[c].offsetParent;
while(el){
x += el.offsetLeft;
y += el.offsetTop;
el = el.offsetParent;
}
window.scrollTo(x, y);
cont = false;
break;
}
}
if(cont || !h){
window.scrollTo(0,0);
}
};
//]]>
</script>
</b:if>

Salve as modificações.

É possível que você encontre outros bugs, mas garanto que o Blogger logo vai solucionar os problemas encontrados.