Menu Expandível

Realizamos uma mudança interessante ultimamente aqui no Dicas e Tutoriais - Botoja, como podem notar lá em baixo temos os marcadores com um link onde você pode expandir ou recolher os itens dos marcadores. (Não tenho mais usado o Menu expandível aqui desde que mudei de Layout e optei por não usar mesmo) Economizando assim espaço no layout. Essa dica eu vi no Templates Para Novo Blogger da Ariane, achei sensacional e agora repasso aqui.

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, copie o link fornecido e use-o neste código, que deve ser colado antes da tag </head>

Continue Lendo...

<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.