Saiba como "Mostrar/Ocultar Gadget HTML com Efeito"

Antes de Clicar no Título

Depois de Clicar no Título

Devido a uma dúvida do João( do Informática na Web 2.0), no post dedicado às dúvidas sem tópico, estou a fazer este post. Em primeiro lugar, eu descobrir esta dica no metablog espanhol El Escaparate. Este hack, é muito bom, porque, por um lado, faz com que o nosso blog carregue menos, coisas, neste caso os widgets! Por outro lado, é também muito engraçado porque adiciona um efeito incrível ao nosso blog.

Vamos lá então aprender a a adicionar este hack aos seus widgets:

NOTA: Este hack utiliza um JavaScript, que irá ser adicionado ao seu blog.

1. Entre no Blogger > Design (Antigamente conhecida com Esquema em Portugal e Layout no Brasil) >  Editar HTML > clique em “Expandir Modelos de Widget”.

2. Agora, vamos adicionar o JavaScript. Procure pela seguinte tag:

</head>

3. /\...Antes dela,  
    vamos adicionar o JavaScript:\/

<!-- Prototype y 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 y Scriptaculous-->

NOTA: Se já tiver este JavaScript, no seu blog para outro hack, não volte a adicioná-lo.

4. Agora, procure pelo nome do widget em que quer adicionar este hack. Vejamos abaixo um exemplo:

<b:widget id='HTML4' locked='false' title='Nome_do_widget' type='HTML'>

5. Uma vez que já localizou o gadget, adicione as linhas a vermelho no código abaixo:

<b:widget id='HTML4' locked='false' title='Nome_do_Widget' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;Nome_do_Widget&quot;,&quot;slide&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='Nome_do_Widget' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

6. Altere Nome_do_Widget pelo nome que deu ao widget onde quer aplicar este hack.

7. Clique em Pré-Visualizar/Visualizar, se estiver tudo no seu devido lugar, clique em Guardar/Salvar Modelo.

NOTA: Se quiser adicionar este hack a outros widgets, retorne ao passo 4. 

Se quiser alterar o símbolo ▼, substitua &#9660; 
pois,  ▼= &#9660;

por [+/-] 

ou por:


<img src="url_do_icon"/> 

isto se,

se pretender adicionar um icon personalizado.

fonte e créditos:http://www.rascunhosblogger.com/2010/06/mostrarocultar-gadget-com-efeito.html

Você está em:

http://noticiasparavocee.blogspot.com