Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

24 novembro 2008

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.

Artigos Relacionados

8 comentários:

Alexandre disse...

Oi. É a primeira vez que comento aqui mas já tenho andado a visitar o teu blog à algum tempo.
Queria agradecer pela dica, dá-me jeito ter isto no meu blog.
Queria só que me ajudasses, se possivel, porque eu meto isto numa lista de links (funciona tudo) e depois meto noutra lista de links que está ao lado mas a lista já não desaparece e quando clico em expandir, espande a primeira lista e não a segunda. Será que sabes qual o problema?

flores rojas disse...

Yo utilizo SkyDrive hace tiempo y me di cuenta de este problema con las animaciones flash. Aplique la misma solución que comentas en esta entrada. De hecho publique una entrada similar.
Eu uso o SkyDrive há algum tempo e me dei conta desse problema com animações flash. Aplicar a mesma solução que você comentar sobre esta entrada. De facto publicar uma entrada similar.

segundarendaextra disse...

Muitom bom essa dica vou testar no meu blog pois graças a você já estou aprendendo muitas coisas para blog!

Marina disse...

Só passei para agradecer as dicas que achei aqui. Já estou linkando para voltar sempre.

Abraço.

Admin disse...

olá, gostei muito da dica, já estou fuçando no meu template de novo. só uma dúvida: qual o problema do googlepages? não entendi :)

Ariane disse...

Admin, o google pages anunciou que fecharia no final do ano (2008). nem sei se já fechou mesmo, não conferi mais. abraços

Tiago Wakabayashi disse...

É uma pergunta baka mas irei fazer: no código em vermelho que se deve adicionar, está escrito expandir/contraER

é isso mesmo ?(contraER)
se for, dá problema colocar "contrair" ?

Ariane disse...

Tiago, é que eu peguei o código no Vagabundia, um blog argentino :) pode colocar como quiser.

Postar um comentário

Os comentários são moderados.