Como ordenar comentários no Blogger



Se você está usando a ferramenta Comentários do próprio Blogger pode está enfrentando alguns problemas, pois é a ferramenta é pouco complexo, na verdade é bem simples. Para além da falta de uma personalização mais intuitiva, os comentários são automaticamente exibidos como mais antigos primeiro, o que é muito ruim pois o comentários mais antigos e menos relevantes são exibidos acima dos dos mais recentes, que podem trazer informações atualizadas pelos próprios leitores.

A melhor forma de exibir os comentários é com os mais recentes acima dos mais antigos, o layout fica mais intuitivo e de certa forma a página fica atualizada, pois o leitor vai sempre ver comentários que podem ser relevantes e atuais primeiro.

Apesar de não ser uma opção padrão na plataforma Blogger, existe uma forma de organizar os comentários pela ordem.

1. A primeira coisa que se precisa fazer é conferir se em seu template está instalado as bibliotecas/dependências JQuerry e FontAwesome. Se seu template for mais complexo feito por um web designer profissional provavelmente essas bibliotecas já estão instalados, mas se for o template antigo padrão do blogger você terá que adicionar antes da tag </head> os seguintes scripts:

<script src='http://code.jquery.com/jquery-latest.js' type='application/javascript'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Se já tem as dependências acima é só adicionar um Gadget HTML no layout do template, para isso vá para o Painel do Blogger > Layout > Adicionar um Gadget e clique em HTML/JavaScript




3. No campo Título não escreva nada, e no campo Conteúdo cole apenas um dos códigos abaixo:

Abaixo está o código original do blog Indice Blogger (a imagem abaixo é exemplo de como ficará):


<style>
#autorgadgetordenercomments{
float: right;
font-size:smaller;
text-decoration: none;
}
#btnorderasc{
cursor: pointer;
border:1px solid #ccc;
border-radius: 5px;
clear:both;
padding: 5px;
display:block;
}
#btnorderasc:hover{
background-color:#eee;
}
#btnorderasc > span{
display: inline-block;
padding: 5px;
}
#btnorderasc > span.active{
font-weight:bolder;
background-image: linear-gradient(to top,#4399cd,#727272);
  box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
                    0 1px 2px rgba(0, 0, 0, 0.05);
  color: #E6E6E6;
  border-color: transparent;
  text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
  border-radius: 3px;
}
#btnorderasc > span.notactive{
font-weight:normal;
}
</style>
<script>
function comentariosasc(){
// @Author: Daniel Ikeda
// @Author_url: indiceblogger.blogspot.com
var comentarios = $('#comment_block > div');
var active = $('#btnorderasc > span.active');
var notactive = $('#btnorderasc > span.notactive');
$(active).addClass('notactive').removeClass('active');
$(notactive).addClass('active').removeClass('notactive');
$("#comment_block").hide("slow");
$('#comment_block').html();
for(i = comentarios.length -1; i >= 0 ;i--){
$('#comment_block').append($(comentarios[i]));
}
$("#comment_block").show("slow");
}
function readyFn(){
// criar botões para mudar o padrão do filtro.
$("#comments").prepend("<br><span id='btnorderasc'>Ordenar: <i class='fa fa-filter'></i> <span class='desc notactive'>Desc</span><span class='asc active'>Asc</span><span id='autorgadgetordenercomments'><a target='_blank' href='http://www.indiceblogger.blogspot.com' title='Author: Daniel Ikeda'>by @dfikeda</a></span></span>");
comentariosasc();
$("#btnorderasc").click(comentariosasc);
}
$(document).ready(readyFn);
</script>

Esse código é o que uso aqui no Como Fazer no Blogger (a imagem abaixo é exemplo de como ficará):

<style>
#autorgadgetordenercomments{
float: right;
font-size:smaller;
text-decoration: none;
}
#btnorderasc{
cursor: pointer;
border:1px solid #f1f1f1;
clear:both;
padding: 5px;
display:block;
text-align: -webkit-right;
background: #f1f1f1;
}
#btnorderasc:hover{
background-color:#eee;
}
#btnorderasc > span{
display: inline-block;
padding: 5px;
}
#btnorderasc > span.active{
font-weight:bolder;
}
#btnorderasc > span.notactive{
font-weight:normal;
}
</style>
<script>
function comentariosasc(){
var comentarios = $('#comment_block > div');
var active = $('#btnorderasc > span.active');
var notactive = $('#btnorderasc > span.notactive');
$(active).addClass('notactive').removeClass('active');
$(notactive).addClass('active').removeClass('notactive');
$("#comment_block").hide("slow");
$('#comment_block').html();
for(i = comentarios.length -1; i >= 0 ;i--){
$('#comment_block').append($(comentarios[i]));
}
$("#comment_block").show("slow");
}
function readyFn(){
// criar botões para mudar o padrão do filtro.
$("#comments").prepend("<br><span id='btnorderasc'>Comentários: <i class='fa fa-comments-o'></i> <span class='desc notactive'>Recentes primeiro</span><span class='asc active'>Antigos primeiro</span><span id='autorgadgetordenercomments'></span></span><br/>");
comentariosasc();
$("#btnorderasc").click(comentariosasc);
}
$(document).ready(readyFn);
  </script>

4. Agora clique em Salvar e já pode conferir se está funcionando corretamente no seu blog.


Comentários