Expandir/contraer gadget de Etiquetas con efecto deslizante


En un post anterior vimos como expander y contraer el gadget de Archivo con efecto deslizante; hoy vamos a hacer lo mismo con el gadget de etiquetas. Como dije en la entrada mencionada, si bien la forma de lograrlo es casi igual para cualquier gadget, a muchos les parece difícil conseguirlo en el gadget de etiquetas y archivos por eso vamos a hacer este post dedicado para el gadget de etiquetas usando Prototype y Scriptaculous.


Si deseamos conseguir este efecto deslizante para los Archivos, mirad » esta entrada

Para conseguirlo, seguimos los siguientes pasos:

1.§ Vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.

2.§ Con ayuda de CTRL+F buscamos </head> y antes de éste pegaremos el siguiente código:

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

Sí ya tenemos este código en nuestra plantilla no será necesario agregarlo de nuevo.

3.§ Ahora , nuevamente con ayuda de CTRL+F buscaremos el nombre que le dimos al gadget de nuestra sección etiquetas.

Por ejemplo, digamos que la sección de etiquetas se llama Las etiquetas,el nombre deberemos de buscarlo en la plantilla y deberá de tener la siguiente estructura:

<b:widget id='Label1' locked='false' title='Las etiquetas' type='Label'>

4.§ Con mucho cuidado insertamos lo que está resaltado en negrita, sin olvidar el </div> que está casi al final; debemos de tener en cuenta que el código puede cambiar un poco según cada plantilla, pero nos guiaremos por el código que está debajo de las líneas que pegaremos:


<b:widget id='Label1' locked='false' title='Las etiquetas' type='Label'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("Etiquetas","slide"); return false'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>&#9660;&#47;&#9650; <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 + &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>

Damos click a guardar.

18 opinaron:

Yessmi

Me aperece muy bueno; yo la verdad no sabía muy bien como hacerlo, pero gracias a esta entrada lo he conseguido; se ve muy bien en mi blog :)

Besos

Responder
G

Lo apliqué en mi blog de pruebas y se ve genial; aún no puedo aplicarlo a mi blog principal porque no tengo muchas etiquetas, cuando tenga como diez lo voy a usar :)

Responder
squirrel

Muy bueno; cuando me saque algo de tiempito lo aplico enseguida.

Responder
juan carlos

Qué súper, debe quedar genial!

Responder
Luis Jesus

My Yesyyy tan mona como siempre!!!!!!!!! hehehe, ya lo aplique a mi blog y quedó mono... te cuento que ya tengo algo de apoyo para lo del USDA, un par de amigos están colaborando pero ahi dandole por si alguién más nos ayuda. un besote :)

Responder
Aner77

Lo he usado, muy práctico.

Responder
Jéssica YK

» Yessmi: me pasaré por tu blog para ver qué tal quedó :)

» G: me alegra que te haya servido

» squirrel: cuando lo apliques, me avisas para ver cómo quedó en tu blog :)

» juan carlos: sí, podrías aplicarlo a tu blog.

» Luis Jesús: me alegro que todo vaya bien en USDA; ojalá que consigan más apoyo.

» Aner77: gracias por la visita :)

S@lu2

Responder
hecgabor

hola.... Jéssica YK

me funciono a la perfeccion ..

por eso lo comparto con todos los que visiten mi blog es que recolecto todos los trucos indispensables.....


gracias por visitar mi blog ...

www.hecgabor.blogspot.com

bye!!!!

Responder
Jéssica YK

» hecgabor:
Nuevamente, gracias por compartir mis entradas ;)

Seguimos en contacto!

S@lu2

Responder
victor
Este comentario ha sido eliminado por el autor.
Responder
victor

Hola,

Felicidades por el blog, está muy bien y es muy útil. Gracias a ti lo he conseguido.

Saludos.

Responder
victor

Hola,

Una pregunta, he aplicado el efecto expandir y contraer el gadget de etiquetas en mi blog. Pero, para quitar el efecto y volver de nuevo a como estaba antes de aplicarlo, ¿ qué pasos debo de seguir ?

Muchas gracias. Saludos.

Responder
Jéssica YK

» victor:
Para quitar el efecto, sólo debes de remover el código que agregaste en el paso número 4.§

S@lu2

Responder
nightcrawler23

Hola, no me funciona el efecto en mi blog, a simple vista se ve perfecto el widget contraido pero al hacer clic no de expande el mismo, que puede ser??? avisame y te paso la direccion del blog...

Responder
Graffiti en Benicarló

Bravo! Por fin he encontrado la solución que buscaba gracias al aprovechamiento y mejora de los gadgets clasicos. Umm espero y supongo que el resto de tus consejos seran igual de interesantes. GRACIAS!!!

Jéssica YK

» Graffiti en Benicarló
Me alegra que el post te haya sido de ayuda !
Gracias por la visita y el comentario

S@lu2

Responder
Graffiti en Benicarló

Ei te voy ha hacer una puntualización que espero sirva para "expandir" aun mas este gran post. El caso es que si tienes varios widgets de etiquetas que quieres hacer desplegables se ha de hacer una pequeña corrección a los añadidos, ya que sino no funciona correctamente la expansión (se expande el primer widgets de etiquetas que tengamos puesto).
Necesita adaptarse tanto la llamada a la función como el id del 'div' añadido ya que se le debe dar un 'id' diferente, en mi caso: Etiquetas2, Etiquetas3, etc

Espero haberme explicado mas o menos bien.

Saludos y gracias de nuevo! :-)

Jéssica YK

» Graffiti en Benicarló:
Gracias por tu aporte; seguramente a varios les servirá tu información :)
S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio