Usando este efecto las entradas se abren y se cierran con un efecto deslizante muy agradable y que además es muy sencillo de incorporar a los títulos de las entradas expandibles, tanto si estamos usándolas en la página principal, como en las páginas de etiquetas.
[1] Para aplicar el efecto deslizante, necesitamos usar las librerías (Prototype y Scriptaculous) de las que hablamos en una entrada anterior.
[2] Estas librerías las incluimos en la plantilla con un script de Google API y tendremos que añadirlo justo antes de </head>:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
[3] Localizamos ahora con los artilugios expandidos, esta línea que forma parte del código que habíamos añadido para nuestras entradas expandibles:
<a expr:onclick='"javascript:toggleIt("" + data:post.id + "");"' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>
[4] La sustituimos por esta otra línea y guardamos los cambios:
<a expr:onclick='"Effect.toggle(\"" + data:post.id + "\",\"slide\");"' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>
Podéis comprobar el resultado pinchando en el [+/-] que acompaña al título de mis entradas expandibles en las páginas de etiquetas.
