Essa vai exclusivamente para donos de blogs na plataforma blogger e quem queira aproveitar o script.
Antes de tudo, gostaria de deixar avisado que não permito que o script seja veiculado por outro site/blog, sendo de total responsabilidade do infrator. Ao invés disso, compartilhe o link no seu blog/site. Respeitando o direito autoral.
A necessidade surgiu revendo algumas postagens antigas, onde o número de comentários ocasiona uma certa desconfiança do visitante, pois ao chegar na área dos comentários, o primeiro comentário é o mais velho, pensando assim que o blog é velho e não tem conteúdo atual, o que pode enganar muita gente.
Público Alvo:
- Blogueiros que utilizam a plataforma Blogger;
Problemas encontrados:
- Acima de 200 comentários o script só irá ordenar os comentários vistos na página, ou seja, se houver mais de 200 comentários infelizmente o script não ordenará.
Vantagens de se utilizar o script:
- Nenhum conhecimento é necessário, basta inserir o gadget no blog;
- Apresenta os comentários cujo resposta mais recentes em primeiro;
- Ordena automaticamente por ordem decrescente assim que a página é carregada.
- Oferece a troca da ordem por meio de um botão customizado.
Resultado Final
O resultado final vai ser este:
Dependências:
Dependências são as necessidades do script para que ele funcione normalmente.
Para tanto verifique se o seu blog já possúi caso o gadget não funcione após a instalação:
Para tanto verifique se o seu blog já possúi caso o gadget não funcione após a instalação:
- Jquery;
- FontAwesome;
Instalar no meu blog
Para adicioná-lo ao seu blog Blogger, siga estas etapas:- Acesse o painel de controle do Blog que quer customizar
- Vá até a página de customização de Layout
- Selecione um dos links de "Adicionar um Gadget"
- Selecione a opção "HTML/JavaScript".
- Copie o texto abaixo:
<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>
- NÃO recomendo a inserção de um título, não há necessidade.
- Cole no campo "Conteúdo" e clique em "Salvar" .

- Pronto, carregue alguma postagem do seu blog para ver como ficou.
Deixe seu comentário sobre o Gadget, se gostar por favor, compartilhe pois assim como me ajudou, pode ajudar outras pessoas também. Obrigado.
Todos os comentários serão moderados, aguarde a publicação.
Outros assuntos ou solicitações pessoais devem ser feitas por meio do formulário de contato.