Como expandir e contrair qualquer widget com efeito deslizante, como o que uso aqui no blog.
Este e um 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 titulo. 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("Campanhas","slide"); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/> ▼ </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 ▼ significa o triângulo ▼ que será visto a direita dos títulos dos widgets, depois de aplicado o efeito. Quando fiz aqui, há muito tempo, mudei para esquerda, como mostra a imagem. mas, não lembro como fiz!
Você poderá substituir este trecho ▼ por [+/-] por exemplo, ou trocar por outro ícone, usando <img src="URL DO ÍCONE"/>
A palavra Campanhas, destacado em vermelho e 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 titulo, em qualquer blog!!!
INFORMACAO 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("prototype", "1.6.1.0");
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
google.load("scriptaculous", "1.8.3");
</script>
