Gadget: CommentsOrdener - Para ordenar os comentários no blogger

Hoje retorno a escrever para o Blogger, devido à vários projetos e desenvolvimentos paralelos que tinha que resolver, ainda tenho, mas vou dar uma atenção à vocês, que apesar do tempo fora estão aqui ainda aguardando uma postagem nova.

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:

1. Jquery;
2. 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.

Author : » Daniel Ikeda «

Share this

Related Posts