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".
<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>
0 Comentários:
Observação: somente um membro deste blog pode postar um comentário.