Saiba como é feito:..."Expandir e Contrair Qualquer Widget"
Autor: Edilene brandao da silva | Publicado: 2012-04-29T00:10:00-07:00


&nbsp;&nbsp;&nbsp;&nbsp; 





&nbsp;este post, foi pesquisado em:

linkselinksnet

Saiba como é feito:

..." Expandir e Contrair Qualquer Widget"


Este post,&nbsp; no qual, finalmente aprendi

\0/

...obrigada, Vera,&nbsp;

grande amiga e parceira,

a saber:



&nbsp;"&nbsp;&nbsp; Expandir e Contrair Qualquer Widget" 



..."&nbsp;&nbsp; Como expandir e contrair qualquer widget com efeito deslizante"" ...

&nbsp;    
..." &nbsp;&nbsp; tutorial de Rosa, do blog espanhol El Escaparate de Rosa. Vale a pena visitar!"


"&nbsp; Antes de aplicar, e necessário incluir o código abaixo, para o uso de qualquer efeito com Scriptaculous, tais como ...

 "&nbsp;&nbsp;&nbsp; mostrar / esconder",&nbsp;

&nbsp;"&nbsp;&nbsp; voltar ao topo",&nbsp;

“efeito de slide”&nbsp;

ou para&nbsp;

“mostrar e esconder os gadgets da barra lateral”.


&gt;&gt;&gt;&nbsp; Se você já o inseriu antes em seu HTML, não e necessário repetir.






 "&nbsp;&nbsp; Se não,&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


basta &nbsp;

colocá-lo antes de&nbsp;


&nbsp;&lt;/head&gt;" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
 








&lt;script type='text/javascript' src='http://www.google.com/jsapi'&gt;&lt;/script&gt;      
&lt;script type='text/javascript'&gt;       
google.load("prototype","1.6.0.3");       
google.load("scriptaculous", "1.8.2");       
&lt;/script&gt;


Todos os widgets que usamos tem praticamente a mesma estrutura, por isso não será muito difícil incluir o código necessário para obter o efeito.
&nbsp; 


"&nbsp; Acesse Painel &gt;&gt;&gt; Editar HTML &gt;&gt;&gt; Clique em Expandir modelos de widgets. Usando CTRL+F, encontre o widget pelo título. "





"&nbsp; Por exemplo: Campanhas" &nbsp; 


você deverá encontrar algo assim:


&lt;b:widget id='HTML4' locked='false' title='Campanhas' type='HTML'&gt;





"&nbsp;&nbsp; Depois de localizar o widget, basta inserir as linhas em negrito no código, desta maneira"









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



"&nbsp; O símbolo &amp;#9660;&nbsp; significa o&nbsp; triângulo ▼ que será visto a  direita dos títulos dos widgets, depois de aplicado o efeito."





Você poderá substituir este trecho &amp;#9660; por [+/-] por exemplo, ou trocar por outro ícone, usando&nbsp;


&lt;img src="URL DO ÍCONE"/&gt; 


"&nbsp; A palavra Campanhas, destacado em vermelho&nbsp;

é um "&nbsp;&nbsp; identificador  único"&nbsp;


que só pode ser usado uma vez,&nbsp;


como você já deve saber e deve ser  colocado de modo idêntico, nos&nbsp;

2 lugares, como mostrado acima."



O ▼ ficará na mesma cor do título, em qualquer blog!!!


INFORMAÇÃO IMPORTANTE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 




"&nbsp; JMiur do Vagabundia postou que alguns blogs que usam Scriptaculous apresentaram problemas com o Widget de Seguidores, por incompatibilidade de scripts. Tive este problema no meu outro blog Amor Insano e já solucionei."





Para solucionar, ele sugere que se coloque este trecho, abaixo em negrito, dentro do código do seu Scriptaculous, já inserido (ou se inserir a partir deste artigo). &nbsp;

Ele estará antes da tag &lt;/head&gt;


Então procure por &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; 

&lt;script src='http://www.google.com/jsapi'/&gt;     




&lt;script src='http://www.google.com/jsapi'/&gt;      
&lt;script&gt;       
google.load(&amp;quot;prototype&amp;quot;, &amp;quot;1.6.1.0&amp;quot;);       
window.JSON = {        
parse: function (st) { return st.evalJSON(); },         
stringify: function(obj) { return Object.toJSON(obj); }         
};       
google.load(&amp;quot;scriptaculous&amp;quot;, &amp;quot;1.8.3&amp;quot;);       
&lt;/script&gt;





&nbsp;este post, foi pesquisado em:

linkselinksnet