Gadget Postagens populares expansível com JQuery no Blogger

24 de janeiro de 2014

2 comentários:
A maioria dos blogs que desejam uma maior divulgação do seu conteúdo possuem o gadget "Postagens Populares" instalado em seu layout. Este que por sua vez tem a função de agrupar as postagens com maior quantidade de visualizações em seu blog.

Já me ocorreram casos em que não pude inserir este gadget por falta de espaço, ou por uma certa desorganização, e com isso, procurei um método de torna-lo expansível. Um efeito com jQuerry Toggle me permitiu este feito! O código tem uma função simples, que ao mesmo tempo é muito útil em blogs compactos: ao clicar sobre o link, ele oculta/exibe o gadget de postagens populares.

O código é dividido em 3 partes: o link de exibição, o CSS, e JavaScript, que fará a mágica funcionar. A instalação pode ser feita com o código diretamente no HTML do blog (que considero um procedimento mais complexo, para que não tem conhecimento básico sobre o assunto), ou então através de um gadget HTML/JavaScript. Neste tutorial, estarei ensinando a inserir o código através do gadget HTML/JavaScript.

Instalando o gadget Postagens Populares


Se você já tiver o gadget adicionado ao seu blog, desconsidere essa etapa.

No painel do blogger, clique em "Layout", "Adicionar um gadget", e na janela que for aberta, selecione o gadget "Postagens populares".


Configure o gadget da maneira que desejar, escolhendo a quantidade de postagens a exibir e também as configurações referentes as miniaturas e descrição de postagem (se deseja exibi-las ou não). No título do gadget, insira este código: <h2></h2> e salve (fará com que o título não apareça).

Instalando o gadget HTML/JavaScript e inserindo o código


Faça o mesmo procedimento anterior, só que desta vez, ao invés de inserir o gadget de Postagens populares, escolha o gadget "HTML/JavaScript".


No conteúdo do gadget, insira o seguinte código:
<style type="text/css">
#PopularPosts1{
    display:none;
}
</style>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'> </script><!-- adiciona biblioteca jquery --><script type='text/javascript'>
$(document).ready(function() {
    $("#botao_pp").click(function(){
  $("#PopularPosts1").toggle("bounce");
    });
});
</script>
<a id="botao_pp" style="cursor: pointer;"><h2>[+/-] Postagens populares</h2>
</a>
Salve o gadget e verifique se tudo está funcionando corretamente no blog. Uma dica é que organize o gadget com o código acima do gadget de Postagens populares, para dar uma efeito mais interessante ao recurso, como se estivesse clicando no título do gadget de Postagens populares para o exibir.

Entendendo o código

CSS - É bem simples, mas tem uma função essencial. A propriedade display:none faz com que o gadget de postagens populares fique oculto até o uso do código jQuery.
JavaScript - Responsável por toda a mágica de mostrar/ocultar no gadget, sem ele nada funcionaria.
HTML - Tem a função da criação do link. É possível que altere os valores que se encontram entre a tag <a>, por um botão, imagem, etc.

E se não funcionar?

Verifique se o valor indicado pela id no código do gadget é o mesmo que é indicado pelo gadget do blog. Pois em alguns casos (quando inserimos dois ou mais gadgets Postagens populares), o valor da id se torna PopularPosts2, 3.. variando conforme a quantidade, e para que o código funcione, o código jQuery deve possuir a mesma id que o gadget possui no HTML. Esta postagem foi formulada através deste tutorial semelhante, no entanto com outro gadget e configurações diferentes.

2 comentários: