Mostrando postagens com marcador Hacks. Mostrar todas as postagens
Mostrando postagens com marcador Hacks. Mostrar todas as postagens

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.

Postagens Relacionadas, com Widget LinkWithin

O site LinkWithin disponibilizou há alguns dias, um widget pré-automático que trouxe o recurso de Postagens Relacionadas com o uso de script, com um simples cadastro e implementação o blog fica com o recurso em menos de 1 minuto.

O recurso pode ser visualizado no meu blog.


Vá até o site do desenvolvedor: e insira os dados do blog:


 
 

  • Em e-mail - Utilize um E-mail Válido
  • Em Blog Link - Insira o URL principal do Blog
  • Em Platform - Escolha em qual plataforma o blog está
  • Em Width - Escolha a quantidade de links a serem mostrados pelo gadget
Caso seu blog possua um fundo escuro marque a caixa de seleção "My blog has light text on a dark background" (Meu blog tem texto claro com fundo escuro).

E finalmente clique em GET WIDGET!

E assim siga os passos mostrados na página ou se não sabe inglês siga:

  1. Clique (na página que abriu) em "Install Widget", faça login se necessário;
  2. Selecione na box-list qual blog a ser implementado (o do cadastro), e, clique em adicionar Widget

A configuração a seguir é opcional, por um motivo de melhor desempenho, o script gera automaticamente o local a ser implantado, por isso não há o recurso de seleção do local a ser mostrado o Widget:
  • Arraste o Bloco do Widget para baixo das postagens
 
  • Clique em salvar e visualize seu blog.
Obs.: Vale lembrar, como dito: o local do widget, não dá para ser mudado, a implementação é feita automaticamente, e, em alguns casos raros o script não funciona corretamente, caso aconteça entre em contato com o desenvolvedor.
Boa Sorte!

*Algumas imagens foram utilizadas com base de referência, tal qual o site do desenvolvedor, desculpas pelo pequeno plágio.
Para alterar os dados (quantos resumos serão apresentados)
Vá para a página de cadastro e insira os dados novamente, selecione a quantidade que mais se adequa ao seu blog e clique em "GET WIDGET" e pronto, não é necessária a modificação no Layout, já que foi alterado a quantidade no código.
Deixe seu cometário sobre o recurso abaixo:
Caso saiba de mais recursos como este compartilhe abaixo com o formulário de contato, ficaremos felizes em saber que esta contribuindo conosco, blogueiros.

Hack de caixa de pesquisa

O que muitos pensam a respeito de caixas de pesquisa, é o de que sempre terão de apagar os dados, tais como textos ou as imagens inseridas dentro delas, para poder fazer a pesquisa, veja um exemplo:

Apague os dados e clique em enviar >.

 

O código desta caixa de pesquisa seria:

<form action='#' method='get'>
<input id='caixa1' maxlength='100' size='25' type='text' value='Pesquisar'/>
<input type='submit' onclick="/search" value='Enviar &gt;'/>
</form>

Conforme a situação pediu, resolvi colocar este método para implementar nosso blog(e para não torrar a paciência do visitante), podendo também ser implementado em sites, teste o resultado final:

 

O código desta caixa de pesquisa seria:

<form action='/search' method='get'>
<input id='s' maxlength='100' name='q' onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}' size='25' type='text' value='Pesquisar'/>
<input type='submit' onclick="/search" value='Enviar &gt;'/>
</form>

Este é o hack para implementarmos nosso site:

onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}'

Passo-a-Passo: Localize sua caixa de pesquisa e implemente o código acima.

Procure por um destes trechos no seu Painel > Layout > Editar HTML:

Texto que aparece no botão de pesquisa, geralmente é "pesquisar"

Texto que aparece dentro da caixa de pesquisa, geralmente é "pesquisar"

Id do elemento.

Localizado o trecho no Editar HTML, visualize a parte do código da caixa de pesquisa, iniciado em <input , contendo o atributo: type='text'

Implemente o código abaixo após o <input :

Para sites:

onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}'

Para Blogger (no Editar HTML):

onblur='if (this.value == &quot;&quot;) {this.value = &quot;Pesquisar&quot;;}' onfocus='if (this.value = &quot;Pesquisar&quot;) {this.value = &quot;&quot;}'

Ficando da seguinte maneira:

Para sites.

<input onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}' [... continuação do código ...]/>

 

Para Blogger

<input onblur='if (this.value == &quot;&quot;) {this.value = &quot;Pesquisar&quot;;}' onfocus='if (this.value = &quot;Pesquisar&quot;) {this.value = &quot;&quot;}' [... continuação do código ...]/>

Teve algum problema de implementação? Comente abaixo com o nosso formulário e ajude quem teve o mesmo problema que o teu!

Não se esqueça:
[...continuação do código...]/> significa que o código continua, não é necessário colar junto, servindo apenas de orientação
Visualize primeiro antes de salvar, provavelmente o hack não funciona mas, assim que clicado em visualizar e a página carregar podera ser feito o processo de gravação (salvar)