Mostrar/Ocultar Categorias com Efeito Deslizante no Blogger

Olá pessoal, hoje vamos aprender a como adicionar um efeito deslizante no gadget "Categorias" em seu blog. Esse efeito é de mostrar/ocular, ou seja, quando você clicar em cima da aba categorias irá expandir com um efeito deslizante, e irá aparecer várias palavras que você categorizou. Essa opção é muito boa, se o seu blog possui vários gadgets instalados, assim facilita a navegabilidade e não confunde o seu visitante.

COMO ADICIONAR ESTE EFEITO AO SEU GADGET:
1º - Entre no Painel de Controle de seu blog e clique na Guia Modelo.
2º - Em seguida clique em "Editar HTML" e clique em "Expandir modelos widgets".
3º - Pressione as teclas CTRL+F e procure por:

</head>

4º - E ACIMA cole o seguinte código

 <!-- Prototype e Scriptaculous--> <script src='http://www.google.com/jsapi'/> <script> google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;); google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;); </script> <!-- Prototype e Scriptaculous -->

5º - Agora vamos procurar pelo nome do widget que queremos adicionar este efeito. Exemplo:

 <b:widget id='Label1' locked='false' title='Categorias' type='Label'>

6º - Localizado o gadget, agora vamos adicionar as linhas em vermelhos no código abaixo:

 <b:widget id='Label1' locked='false' title='Categorias' type='Label'> <b:includable id='main'> <a href='#' onclick='Effect.toggle("Categorias","slide"); return false'> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/> &#9660;</h2> </b:if> </a><div id='Categorias' style='display: none;'> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=30&quot;'> <data:label.name/> </a> </b:if> <span dir='ltr'>(<data:label.count/>)</span> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </div> </b:includable> </b:widget>

7º - Clique em Visualizar, se tudo ocorrer tudo certo clique em Salvar Modelo.

Créditos para o Manuel Veloso.