Animeted Collpase listas expandiveis

Em Setembro eu publiquei um post sobre como transformar as listas da sidebar em menus expandíveis usando o Jquery e após a publicação, descobri um erro que não consegui arrumar (e tentei, tentei, tentei...). No entanto, visitando o Vagabundia, descobri uma maneira eficaz de conseguir o efeito, que pode ser visto neste blog de testes do JMiur (clique em Expandir/Contraer, na sidebar).

Este efeito se consegue usando o scriptanimatedcollpase. Faça o download e hospede em algum servidor (sugiro o SkyDrive, já que o Google Pages já era). Após hospedar o script, copiei o link fornecido e use-o neste código, que deve ser colado antes da tag </head>

<script type="text/javascript" src="URL_animatedcollapse.js"></script>

Salve. Depois clique em Expandir Modelo de Widget e procure por este trecho do código (óbviamente você já deverá ter em seu blog uma lista de links, ok?)

<b:widget id='LinkList1' locked='false' title='Titulo da lista' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<div style='text-align:center;'>
      <a href='javascript:lasEtiquetas.slideit()'>EXPANDIR/CONTRAER</a>
    </div>
    <div id='EtiquetasLista'>


  <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>


</div>
    <script type='text/javascript'>var lasEtiquetas=new animatedcollapse("EtiquetasLista", 500, false)</script>


   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Acrescente os códigos em vermelho e salve. Você pode usar o efeito em quantas listas desejar, bastando repetir o código. Para usar o efeito em uma lista de Marcadores:

<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>

    <div style='text-align:center;'>
      <a href='javascript:lasEtiquetas.slideit()'>EXPANDIR/CONTRAER</a>
    </div>

    <div id='EtiquetasLista'>

      <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'>
              <data:label.name/>
            </a>
          </b:if>
          <span dir='ltr'>(<data:label.count/>)</span>
        </li>
      </b:loop>
      </ul>

    </div>
    <script type='text/javascript'>var lasEtiquetas=new animatedcollapse("EtiquetasLista", 500, false)</script>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Como hospedar JS no SkyDrive

Para hospedar no  SkyDrive  basta ter uma conta do no WindowsLive (Hotmail, Space, MSN). Na sua página do SkyDrive, clique na pasta Público e depois em Adicionar Arquivos:

 

Depois de subir o .js, clique com o botão direito sobre a pastinha com o arquivo e vá em Propriedades.

 Copiei todo o primeiro link (endereço) que aparece, como mostra a imagem abaixo:

Faremos a seguinte alteração no endereço: retiraremos o final ?download dele. Só então ele será válido para colocarmos no código do template, da maneira que expliquei acima:

<script type="text/javascript" src="URL_animatedcollapse.js"></script>

No caso, o meu ficou assim:

<script type="text/javascript" src="http://pksnhw.bay.livefilestore.com/y1p8NsS9Oihdasa7auBF9q0SskdGsd9ldx-4hUjNejSjLpp2Mwv0qG_b5PFeQPJc8d4f-4jdYXeSgeVnvjSFIQ69g/animatedcollapse(2).js"></script>

O link é assim mesmo, enorme.