Se usa efecto Scriptaculous y Prototype para asemejar un efecto "deslizante".
1. Se añade la librería de Javascript - Prototipe y Scriptculous.
JavaScript se carga una vez en la plantilla antes de </head> lo que muestra el código API de Google:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>
<!-- Prototype y Scriptaculous-->
Es necesario revisar las versiones son actualizadas en Google Apis. Aunque los efectos que estemos usando funcionaran es aconsejable actualizarlos.
2. Todos los gadgets mantienen casi la misma estructura en su código. De ahí que sólo haya que añadir pequeños trocitos de códigos para obtener el objetivo deseado.
- Diseño>Edición de HTML>expandimos artilugios
- Control+F y buscamos el gadget que nos interesa por la línea de código que marca su comienzo; en ella leeremos el título que le hemos puesto.
<b:widget id='HTML4' locked='false' title='Posts populares' type='HTML'>
3. Una vez localizado el gadget (Control+F), añadimos unas líneas de código en negrita tomando como referencia el resto de código del gadget...
<b:widget id='HTML4' locked='false' title='Posts populares' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("POPULARES","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='POPULARES' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Aclaraciones:
- El símbolo ▼ o ▼ se puede modificar por cualquier otro.
- El código [+/-] se puede sustituir hasta por una imagen (icono) usando: <img src="url_del_icono"/>
- En naranja la palabra POPULARES actúa como id , un "identificador único" que sólo puede usarse en un gadget.
Cuidado: cada gadget deberá tener un id distinto y único en los dos lugares que se indican.
Ejemplo con el código añadido al gadget de etiquetas:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("Etiquetas","slide"); return false'><b:if cond='data:title != ""'>
<h2 class='title'><data:title/>▼</h2></b:if>
</a>
<div align='left' id='Etiquetas' style='display: none;'>
<div class='widget-content'>
<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 + "?max-results=30"'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>
► Te puede interesar:
- Expandir entrada con el post footer incluído
- Expandir entradas en página principal - home
- Listado títulos de entradas en página de etiquetas
- Intentar ver un número determinado de entradas en las anteriores y antiguas
- Mostrar y ocultar cualquier cosa con script simple
- Etiquetas expandir y recoger con script simple
- Archivos Feed expandir o contraer con script simple
- Fórmula simple de contraer o expandir un gadget
- Expandir un post de forma simple
• Con JavaScript con script.aculo.us o prototype - Clásico
• Expandir o recoger un gadget con Scriptaculous - moderno
• Expandir y recoger parte de una entrada con Scriptaculous
• Expandir post con efecto deslizante con javascript
