Saiba como é feito:..."Expandir e Contrair Qualquer Widget" | #blogdicasblogueiros ...bdb... blog dicas blogueiros

Saiba como é feito:..."Expandir e Contrair Qualquer Widget"

 este post foi pesquisado em: 

http://linkselinksnet.blogspot.com/2010/08/expandir-e-contrair-qualquer-widget.html       



 

 

Saiba como é feito:..."  Expandir e Contrair Qualquer Widget"








post no qual, finalmente aprendi
\0/
obrigada, Vera
grande amiga e parceira,
a saber:

 "   Expandir e Contrair Qualquer Widget"

widgets-espansiveis


..."   Como expandir e contrair qualquer widget com efeito deslizante"" ...
 
..."    tutorial de Rosa, do blog espanhol El Escaparate de Rosa. Vale a pena visitar!"

Antes de aplicar, e necessário incluir o código abaixo, para o uso de qualquer efeito com Scriptaculous, tais como ...
"    mostrar / esconder", 
 "   voltar ao topo", 
efeito de slide” 

ou para 
mostrar e esconder os gadgets da barra lateral.

>>>  Se você já o inseriu antes em seu HTML, não e necessário repetir.




"   Se não,basta colocá-lo antes de





 </head>"                                                                 






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

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.
 

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




"  Por exemplo: Campanhas"  

você deverá encontrar algo assim:
<b:widget id='HTML4' locked='false' title='Campanhas' type='HTML'>



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







<b:widget id='HTML4' locked='false' title='Campanhas' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;Campanhas&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='Campanhas' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


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


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


<img src="URL DO ÍCONE"/>

"  A palavra Campanhas, destacado em vermelho 
é um "   identificador único" 

que só pode ser usado uma vez, 

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


2 lugares, como mostrado acima."


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



INFORMAÇÃO IMPORTANTE                                                                        








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

Ele estará antes da tag </head>




Então procure por            

 <script src='http://www.google.com/jsapi'/>

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

google.load(&quot;scriptaculous&quot;, &quot;1.8.3&quot;);
</script>





























flo

http://blogdicasblogueiros.blogspot.com.br/

Nenhum comentário:

Postar um comentário

Mensagem do formulário de comentário: