223

Expandir y contraer gadget con Scriptaculous

Gadgets expandibles
Después de haber visto con anterioridad como expandir y contraer cualquier gadget usando algo de javascript, vamos a ver ahora como hacer eso mismo usando Scriptaculous y Prototype lo que añadirá al gadget un efecto "deslizante" muy elegante.


[1] En primer lugar tenemos que incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la entrada al respecto, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso:

<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>

[2] Todos los gadget mantienen prácticamente la misma estructura en su código, con lo que no nos será muy difícil incluir el código necesario para conseguir el efecto.
En "Edición HTML" de nuestro panel, marcamos la casilla de "expandir las plantillas de artilugios" y localizamos el gadget que nos interesa por la línea de código que marca su comienzo y en la que podemos ver su título:

<b:widget id='HTML4' locked='false' title='Posts populares' type='HTML'>

[3] Una vez localizado el gadget, añadimos estas líneas de código que veis 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(&quot;POPULARES&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='POPULARES' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Notas:
Yo he usado el símbolo &#9660;, es decir el triangulo ▼ que veis a la derecha de los títulos en los gadget con el efecto añadido.
Podéis sustituir ese código por [+/-] por ejemplo, e incluso por un icono: <img src="url_del_icono"/>

He destacado en color naranja la palabra POPULARES esa palabra es un "identificador único" es decir, solo puede usarse en un gadget concreto, así que será distinto en cada gadget que incluya el código y ha de ser idéntico en los dos lugares del código donde va colocado.


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(&quot;Etiquetas&quot;,&quot;slide&quot;); return false'><b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/>&#9660;</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 + &quot;?max-results=30&quot;'>
<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>

Entradas Relacionadas:

223 comentarios:

«El más antiguo   ‹Más antiguo   Total comentarios: 201 – 223 de 223   Más reciente›   El más reciente»
Cooperadora Hogar Crecer

Estaba en el blog de pruebas hasta perfeccionarlo, ahora está en el original para que lo puedas ver.
El título del gadget es "Escuchando radio".

El tamaño del ícono está bueno. Probé agregarle padding-top y left, pero, evidentemente, no estuvo bien puesto porque no varió su posición.
Tampoco lo aceptó la plantilla.

Gracias por lo que puedas sugerir!

Anónimo

Hogar CRECER Pues yo lo veo bien, nada de pegado a donde dices.

Carlos Martínez

Hola rosa, una vez mas vuelvo a recurrir a tu sabiduria ;).... Primero que nada un saludo, jeje.... Y segundo, bueno.... Veras, en mi blog estoy utilizando este efecto y me funciona bien, menos en firefox, he probado muchos navegadores y el unico es ese, no se si puedes darme una mano a ver que pasa, al parecer es el script ya que la flecha de ir arriba ni el efecto agarra, bueno, espero puedas darme una mano, te dejo el archivo de mi plantilla y disculpa tanta molestia :(..

url: https://docs.google.com/leaf?id=0BwlKGoaf_SQrNzViZTRkMjctODliMi00ZDJlLWJiNWEtZTE1Y2MwNWM4OWY5&hl=en

PD: Con url creo que te refieres a la direccion asi no? bueno, espero no equivocarme... saludos!

Anónimo

_CarlitoX_Pues lo único que puedo decirte al respecto, es que yo misma en "mas botones" y "Archivo del blog" estoy usando ese efecto tal como aquí se explica, y si funciona en Firefox...:o

Eligor!

acabo de agregarlo a mi blog pero sucede un pequeño problema, me queda un espacio vacio hacia abajo en ETIQUETAS (http://borrador-j4.blogspot.com/) - es posible eliminar ese espacio muchas gracias :)

Anónimo

Eligor! No veo el problema que dices :O lo veo perfecto...

Eligor!

Pues tenia margin bottom mas abajo eso erá!, pero me di cuenta que con este script se ocultan los SEGUIDORES :S, alguien sabra la solucion a esto..? Saludos! gracias rosa :D

Eligor!

Ya encontre la solucion, me lo dejaste en otra respuesta muchas gracias

XiC Nou Barris

hola rosa, en el blog que estoy haciendo te cogí este truco para las etiquetas y me quedó perfecto,,, mi consulta es como puedo dejarlo como antes para ver como queda o sea sin expandir, cuando lo puse no tenía etiquetas y la gente que entra en el blog anda un poco perdida porque no saben muy bien donde mirar... solo es para ver la diferencia y quedarme con la que sea más comodo para ellos.
gracias como siempre.
núria orbaneja de "cosas de núria"

Anónimo

XIC nou barris No tienes más que eliminar el gadget de etiquetas y volver a añadirlo como siempre sin hacerle ningún cambio.

fotos de núria

gracias rosa, bien sencillo era y no había caído en ello... agradecida como siempre.
saludos

Helena

Hola Rosa,
En primer lugar quería agradecerte las buenas instrucciones que das en el blog. Gracias a ello he podido implementar muchas cositas en el mio...
Por otra parte, en relación a esta entrada quería comentarte que al meter este código me aparece el título del widget subrayado, ¿qué puedo hacer para ponerlo normal?
Un saludo y muchas gracias por adelantado.

Anónimo

Helena ¿Cómo subrayado?... Yo veo el título de los gadgets a los que aplicaste esto, igual que los que no lo tienen aplicado... como debe ser, no pierde ni gana propiedades distintas...

Helena

Hola Rosa, perdona que te moleste de nuevo, no sé por qué será, si es el explorador desde el que entro (IE8) pero a mí los títulos de los gadgets en los que he aplicado este efecto se me ven subrayados... Por ejemplo en "Archivo" o en "Últimos comentarios".
No queda mal, pero era más que nada por homogeneizar los títulos.
Un saludo y muchas gracias

Anónimo

Helena Vamos a probar una cosa... coloca antes de ]]></b:skin> esto y me dices...

.sidebar h2 a{
text-decoration:none;
}

Helena

Rosa, introduciendo eso me aparece igual, sigue subrayado.

Anónimo

Helena Probemos otra cosa... antes de ]]></b:skin> coloca esto:
#BlogArchive1 h2{text-decoration:none;}
#BlogList1 h2{text-decoration:underline;}

VIATOR MUNDUS

Hola Rosa. Ya he conseguido poner el efecto Scripyaculos en "Archivo" ;) gracias por tu dedicación, y disculpa el haber usado el otro post para comunicarme contigo.
Respecto a lo del tema de poder tener categorias y etiquetas, dos conceptos diferentes, tal como parece ser que permite worpress, de momento voy a tratar de solucionarlo con la creación de otro gadget de "etiquetas" renombrado como "A donde ir en..." el cual mostrará solo las etiquetas seleccionadas. La lastima es que el listado solo puede ser alfabetico y los meses del año quedarán un poco raros a lo que estamos acostumbrados. Si se puede listar de manera fija, te agradecería me remitieras a como poder hacerlo. He mirado y buceado por tu blog pero al final tanta información para un novato abruma y desorienta. Lo expongo por si te puede dar alguna idea o a alguien le puede parecer usar esta posibilidad.

www.viatormundusblog.com

Anónimo

VIATOR MUNDUS De forma automática no es posible hasta donde yo se, lo que podría hacerse es un listado manual de las etiquetas que quieres destacar, por supuesto enlazando cada etiqueta con su url correspondiente.

Helena

Rosa, perdona el coñazo que te he dado y el tiempo que he tardado en comprobar tus indicaciones (estaba de viaje), pero no logro quitar el subrayado... He mirado el blog de Viator Mundus y yo también veo el suyo subrayado.
Muchas gracias por el tiempo que te he hecho perder.
Un saludo

Mabel Calle

gracias rosa funciona muy bien en mi blog ya lo probé con Google chrome y IE 8 hasta hora todo bien

SHIVAN

Hola Rosa.
He aplicado esto al gadget de etiquetas de mi blog y funciona correctamente.
El problema esta en que le cuesta desplegarse un tiempo. No es fluido sino que se desplega a trompicones.
Sabes porque puede ser? Gracias

Anónimo

SHIVAN He visto eso en otros casos y siempre tenían una imagen de fondo añadida en los gadgets de la sidebar, así que creo es por eso...

Mientras el gadget sube o baja, la imagen (el fondo con los bordes redondeados) se va cargando, con lo que hace ese efecto de "tirón"

«El más antiguo   ‹Más antiguo   Total comentarios: 201 – 223 de 223   Más reciente›   El más reciente»

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S