Postagens populares expansível

Yo! Yo! Yo! Hoje venho trazer uma ferramenta bem legal para as postagens populares. Um recurso que a deixa escondidinha, mas oferecendo um botão visível para a pessoa clicar e ele abrir. É ótimo para quem tem um bom trafico de visitas no blog, mas quer economizar espaço (meu caso), esse tutorial é para você. No botão mais abaixo você pode ver a pré-visualização. =)  Espero que gostem. Aviso que na visualização pode estar um pouco torto, mas é apenas uma pagina de exemplo, ok?

Brevia do efeito

OBS: Devo avisar, que esse tutorial é ensinando somente o efeito abrir e fechar do gadget, não se aplica no modelo de postagens populares.

1. Vá em Layout e clique em "Adicionar novo Gadget JavaScript", uma janelinha vai abrir com algumas opções, encontre a de postagens populares, seu nome vareia entre "Postagens Populares" e "Postagens mais visitadas". Ai achar clique em adicionar e depois salvar.

2. Agora clique novamente em "Adicionar novo Gadget JavaScript", e procure pelo gadget "HTML Java/Script", e dentro dele cole:

Códigos

<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 e veja se esta funcionando corretamente. Aconselho que organize e de uma personalizada no código acima, para ficar mais agradável e combine com seu blog. 

Entendendo o código:

CSS: Ele é 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: Ele é o 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.

A parte em vermelho é o título (texto) onde iremos clicar para mostrar/ocultar o widget. A parte em verde é o estilo de texto onde clicamos. O h2 é a tag do título que usamos na sidebar, ou seja ao aplicar esse código ele vai ficar igual ao título da sua sidebar.  

3. No lugar do h2 você pode aplicar um menu, dando um estilo se desejar. Basta remover <h2>Nome</h2> e no lugar colocar <open>Nome</open>

E ainda nesse gadget procure por </style> e acima dele cole:

Códigos

open{
margin:1px;
padding:8px;
padding-top: 5px;
padding-bottom: 15px;
display: inline-block;
font-family: 'Georgia';
font-size: 17px;
color: #fff;
float: center;
text-align: center;
line-height:32px;
border: 1px solid #3b3b3b;
background:#3b3b3b;
box-shadow: inset 0px 0px 8px #555555;
width: 370px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

E se não funcionar:

É muito simples é fácil de resolver 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. É para saber disso é muito fácil, abra o gadget de postagens populares e vá na barra de endereço dele, você vai encontrar um endereço longo e no final dele vai ter algo assim: widgetId=PopularPosts1 a parte marcada em azul é o Id do seu widget. 

Créditos: Henrique Zenny