Gadget: CommentsOrdener - Para ordenar os comentários no blogger
Autor: » Daniel Ikeda « | Publicado: 2016-05-26T15:49:00-03:00

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.


<!--
google_ad_client = "ca-pub-8449916164290895";
/* In-line 336x280 */
google_ad_slot = "7813151472";
google_ad_width = 336;
google_ad_height = 280;






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:


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:




&lt;style&gt;
#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 &gt; span{
display: inline-block;
padding: 5px;
}
#btnorderasc &gt; span.active{
font-weight:bolder;
background-image: linear-gradient(to top,#4399cd,#727272);
&nbsp;&nbsp;box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0 1px 2px rgba(0, 0, 0, 0.05);
&nbsp;&nbsp;color: #E6E6E6;
&nbsp;&nbsp;border-color: transparent;
&nbsp;&nbsp;text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
&nbsp;&nbsp;border-radius: 3px;
}
#btnorderasc &gt; span.notactive{
font-weight:normal;
}
&lt;/style&gt;
&lt;script&gt;   
function comentariosasc(){
// @Author: Daniel Ikeda
// @Author_url: indiceblogger.blogspot.com
var comentarios = $('#comment_block &gt; div');
var active = $('#btnorderasc &gt; span.active');
var notactive = $('#btnorderasc &gt; 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 &gt;= 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("&lt;br&gt;&lt;span id='btnorderasc'&gt;Ordenar: &lt;i class='fa fa-filter'&gt;&lt;/i&gt; &lt;span class='desc notactive'&gt;Desc&lt;/span&gt;&lt;span class='asc active'&gt;Asc&lt;/span&gt;&lt;span id='autorgadgetordenercomments'&gt;&lt;a target='_blank' href='http://www.indiceblogger.blogspot.com' title='Author: Daniel Ikeda'&gt;by @dfikeda&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;");
comentariosasc();
$("#btnorderasc").click(comentariosasc);
}
$(document).ready(readyFn);
&lt;/script&gt;




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.