Expandir/contraer gadgets con javascript


Actualización:

Si deseas que el expandir y contraer tenga un efecto deslizante con Scriptaculous mira esta entrada


Vamos a ver cómo expandir y contraer [+/-] cualquier gadget con javascript.

Para expandir y contraer cualquier gadget con javascript seguimos los siguientes pasos:

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

2.§ Ahora , con ayuda de CTRL+F buscaremos el nombre que le dimos al gadget al que vamos a aplicar el efecto de [+/-].

Por ejemplo, digamos que mi gadget se llama Blogroll,el nombre deberemos de buscarlo en la plantilla y deberá de tener la siguiente estructura:

<b:widget id='HTML1' locked='false' title='Blogroll' type='HTML'>


3.§ Con mucho cuidado insertamos lo que está resaltado en negrita; 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='HTML1' locked='false' title='Blogroll' type='HTML'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>&#9660;&#47;&#9650;
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<data:content/>
</div>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Damos click a guardar.

9 opinaron:

G

Me gusta; lo probé en mi blog de pruebas y se ve genial

Responder
Yessmi

Ya lo agregué a varios de mis gadgets; me gusta cómo se ve.

Besos :)

Responder
Gra

Hola !!! descubrí tu blog y me parece excelente !!
Con este truco, se ven todas las entradas de cada etiqueta o las primeras 20?
Gracias y SALUDOS !!!!

Responder
Jéssica YK

» G:
Me alegro !

» Yessmi:
Tienes razón, se ve genial en tu blog.

S@lu2

Responder
Jéssica YK

» Gra:
No entiendo muy bien tu pregunta; el código de esta entrada es para expandir y contraer los gadgets o widgets no es para expandir y contraer los post de las etiquetas.

Si deseas expandir y contraer los post de cada etiqueta puedes leer esta entrada.

S@lu2

Responder
Gra

Ay Ay teneme paciencia ;)!!!
Al escribir estaba pensando en ese tema de lo que muestran las etiquetas!!!!.Que desastre!!!
En resumen: quiero hacer un menu de etiquetas y que las etiquetas desplieguen los titulos de todos los post en forma deslizante...(que sea facil de expandir y recoger)
Uf...yo sola no me decido que hacer...
Lo pienso mejor y repregunto!!!
Gracias por contestar !!
Saludos!!!!

Responder
Jéssica YK

» Gra:
Si ya tienes las nube de etiquetas, entonces sólo tendrías que seguir los pasos de la entrada que te mencioné en mi respuesta anterior (http://diyva.blogspot.com/2009/08/expandir-titulos-de-los-post-en-las.html).

sI tienes alguna otra duda, me avisas que te ayudaré con mucho gusto :)

S@lu2

Responder
Gra

Gracias !!!!Es justo lo que pensaba hacer!!!! lo pruebo y luego te sigo preguntando!!!. gracias otra vez...

Responder
Jéssica YK

» Gra:
Si tienes alguna duda, me avisas para poder ayudarte ;)

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