Expandir y contraer gadgets con efecto deslizante

25 de abril de 2011 298 comentarios ,
Muchas veces algunos gadgets se vuelven muy largos con el paso de tiempo, como el de Etiquetas, Archivo del blog, Lista de enlaces, etc. y estos comienzan a ocupar demasiado espacio en la sidebar, así que una buena forma de ahorrarnos ese espacio es contraer los gadgets para que se expandan sólo cuando el lector quiera verlos, y además de eso con un efecto deslizante. 
Puedes ver un ejemplo en este blog de pruebas.

Para hacer esto en los gadgets vamos a usar Scriptaculous que es el que le dará el efecto deslizante.

Sólo vamos a Diseño | Edición de HTML y marcamos la casilla Expandir plantillas de artilugios.
Agrega antes de </head> lo siguiente:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->
Ahora localizamos el gadget al que queremos aplicarle el truco, por ejemplo, un gadget HTML/Javascript sería más o menos así:
<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;ExpandGadget1&quot;,&quot;slide&quot;); return false'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>&#9660;&#9650; <data:title/></h2>
</b:if>
</a><div align='center' id='ExpandGadget1' style='display: none; text-align:left;'>
<div class='widget-content'>
<data:content/>
</div>

</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Agrega lo que está en color rojo y listo. Aquí lo que se debe tomar en cuenta es que cada vez que se ponga en un gadget se debe cambiar lo que está en color azul por otro nombre, por ejemplo ExpandGadget2, ExpandGadget3, etc. o cualquier otro nombre pero nunca debe ser igual a otro que ya tengamos.

Es seguro que la estructura de algunos gadgets no se vean como el del ejemplo pues éstos varían según el tipo de gadget que sean, pero para saber dónde debemos poner el código sólo hay que guiarnos por los códigos que están en color gris, así que sólo localiza la primera línea gris y debajo pega el primer código en rojo, luego localiza la segunda parte gris y ahí deberás pegar alrededor lo otro en color rojo, y por último busca la última línea gris y arriba de ella pega el último código rojo.

No está de más recordarles que se usa Scriptaculous y que no es compatible con jQuery, así que si usas jQuery entonces deberás realizar el hack para que puedan funcionar las dos librerías juntas.


298 comentarios en:

" Expandir y contraer gadgets con efecto deslizante "

  1. Buen aporte estoy seguro que a muchos les va a interezar sobre todo porque se ve muy bonito al desplazar el gadget.

    Saludos.

    ResponderEliminar
  2. Hola Potro, este truco es super útil, ya veo que me va a servir y de seguro a muchos ciudadanos más, mil gracias, te envío un super abrazo con sabor peruano

    ResponderEliminar
  3. EXCELENTE POTRO AYUDAME CON LO DEL SLIDER Soy Kvn

    ResponderEliminar
  4. Ey Potro, muchas gracias ya se te echaba de menos ;)

    ResponderEliminar
  5. se ve genial el efecto al desplazar lo malo de esto es qe a veces los lectores no se dan cuenta de que esta ahi por lotanto creo que en un gadget de suscripcion o algo asi no deberia usarse

    ResponderEliminar
  6. Hola Potro, esta super chulo este efecto, gracias Saludos!

    ResponderEliminar
  7. Que bueno.. jeje.. un abrazo campeon.

    Y saludos a todos los ciudadanos !!!

    ResponderEliminar
  8. Gracias x el aporte. Salu2 y q stes bien

    ResponderEliminar
  9. Daniel, espero que así sea :)

    Silvia, gracias por el abrazo con sabor peruano, otro más para ti!

    kevin steven molina, en el último correo que te mandé te respondí a lo que pedías.

    MaG@S RaDioMuSiC, gracias, aunque no estaba perdido eh :P

    ResponderEliminar
  10. Kron, claro, sólo sería bueno usarse en los gadgets largos, uno de suscripción es muy corto y no amerita que se expanda.


    Eduardo Sanguino, ¿verdad que sí? :) saludos!


    Odin KO, otro abrazo para ti brother.


    Lady Pink, que igual estés bien :)

    ResponderEliminar
  11. Potro vale que paso loco como ta la cosa como pasastes semana santa? yo fui de viaje a visitar a mi familia por haya en carupano aqui en venezuela bueno tengo mucho tiempo sin pasar te dije hace tiempo que pasaria mucho seguido pero jeje con los estudios me pel ahora si q entro simplemente q ya no ando con mi blog y se me habia olvidado pero pasare de vez en cuando a ver ya sabes q tamos en contacto en el face aunque casi no te veo hay XD slaudos y cuidate!

    ResponderEliminar
  12. Esta genial, me imagino que también sirve para contraer las entradas.


    Saludos!

    ResponderEliminar
  13. wow, this is using prorotype...so smooth :)

    ResponderEliminar
  14. Eso era algo que me pasaba a mi y a gracias al menú desplegable lo solucione pero esta otra opción no esta mal, por lo que creo que se la incorporare ya que me permitirá ahorra más espacio.
    morenay09.blogspot.com

    ResponderEliminar
  15. Hola Potro,
    Muchisimas gracias por este post.. Realmente es muy util y yo lo usare sin lugar a dudas... Te queria comentar algo al respecto. En vez de poner el efecto deslizante con scriptaculous, se podria poner una barra lateral que suba y baje, para desplazarse?. Si se pudiera poner, seria genial.
    Muchas gracias.
    Tu seguidor fiel,
    jose

    ResponderEliminar
  16. Uuuuh... cómo mola esto! :D Me lo quedo para más tarde que mi lista de vidoejuegos se está alargando y al final se va a quedar más larga que el everest, ya utilizaré esto en su momento ;) Gracias potro!!

    ResponderEliminar
  17. yonathan, la cuenta personal del Face ya la cerré, pero me da gusto que hayas podido disfrutar a tu familia y que hayas gozado tus vacaciones :)

    Watesam, toda la entrada por completo no lo he intentado, pero expandir partes de una entrada sí es posible.

    Beben Koben, that's cool, isn't? ;)

    ResponderEliminar
  18. Hola Potro,en primer lugar agradecerte mucho, otra vez, tu aportación al conocimiento de personas como yo, que no somos expertos en estos temas.Me ha servido de mucha ayuda para mis blogs con los alumnos...
    Quisiera saber si es posible modificar de alguna manera el codigo de incrustacion de un album web picasa para que se vea repetidamente en el blog.
    Gracias de nuevo por tu atención. Matías Ascanio

    ResponderEliminar
  19. cslimites, claro, todo lo que sirva para mejorar el blog debe ser considerado!

    We Game / Emilio, nos cuentas cómo te fue ;)

    ResponderEliminar
  20. Jose Frances , claro, sólo localiza la ID del gadget al que le quieres aplicar ese efecto, luego antes de ]]></b:skin> pega esto:

    #ID {
    height:150px;
    overflow:auto;
    }

    En ID pon el ID del gadget que quieres y listo.

    ResponderEliminar
  21. Potro, tengo una plantilla nueva y cuando quiero que unas imagenes del menú aparezcan juntas, aparecen separadas por un espacio. ¿Cómo hago para que esten juntas? http://oi55.tinypic.com/2v1aqys.jpg

    ResponderEliminar
  22. CRACIAS POTRO COMO SIEMPRE CUMPLIDOR!!! Sigue ASi.... Eres El MejoR!

    ResponderEliminar
  23. Potro Segui todo como lo indicas pero almomento de hacer clic para que se expanda no se expande se va arriva del blog como si fuera una flecha

    ResponderEliminar
  24. potro me podrias decir los codigos html que usas en los colores de los links? el azul y el naranja en el hover.. un abrazo.

    ResponderEliminar
  25. Hola Potro,
    A mi no me sale!... Y eso que llevo mas de 3 horas intentandolo, pero nada!.
    Yo lo que quiero es unicamente poner una barra lateral que suba y baje al gadget de LISTLINK.(Sin scriptaculous). Entonces no se exactamente los pasos que he de seguir.
    No se si debo agregar el codigo que indicas antes de /HEAD/
    Lo que si he hecho es pegar antes de /b:skin> el codigo que me has proporcionado, que es #ID { height:150px overflow:auto;} pero no ha ocurrido nada.
    Cuando dices que localice el ID del gadget que quiero (LISTLINK1: Supongo que es este con el numero 1 por ser el primero en mi lista de enlaces). Una vez localizado que hago?..




    Me dices que haga esto: En ID pon el ID del gadget que quieres y listo. Esto no lo entiendo...!??
    Si me pudieras dar instrucciones de lo que he de hacer exactamente te lo agradeceria de corazon. El blog que digo es este: www.dondeandaras.blgspot.com y no he podido guardar los cambios porque lo que hice borro la lista de mis enlaces.. Asi que voy fatal!..
    Muchas gracias por tu ayuda.
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  26. matiasascanio, no he entendido bien, ¿quieres poner el mismo álbum de Picasaweb varias veces en el blog? Si es así sólo tienes que poner el código tantas veces como quieras que aparezca el álbum. No sé si te he entendido bien :/


    CRNDXA, ¿cuál es la plantilla en cuestión?


    Generofem, a ti por tu visita!

    ResponderEliminar
  27. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  28. Potro Segui todo como lo indicas pero almomento de hacer clic para que se expanda no se expande se va arriva del blog como si fuera una flecha


    Mi blog es www.elblogr21.blogspot.com

    PLEASE POTRO ME URGE

    ResponderEliminar
  29. _RosarioZapien_ , no hace falta repetir los comentarios, todos los comentarios los respondo pero lo voy haciendo conforme van llegando y antes del tuyo había otros tantos en diferentes entradas que también debo atender.

    Recuerda que como dice en la entrada, Scriptaculous no es compatible con jQuery, y en tu plantilla usas jQuery, es por eso que no te ha funcionado.
    Si eliminas jQuery deberá trabajar sin problemas.

    ResponderEliminar
  30. Ok.potro gracias por aclararme sobre los comentarios creo que estaba desesperado porque lo andaba buscando desde hace tieempo...
    Disculpa las molestias potro

    ResponderEliminar
  31. Jose Frances, en el lugar donde lo has puesto es correcto. Cuando te digo que debes poner la ID del gadget sí es como dices pero debe estar escrito exactamente tal como lo ves, respetando las mayúsculas y minúsculas, de lo contrario no funcionará.
    Por ejemplo, si se trata de un gadget de 'Lista de enlaces' podría ser así:

    #LinkList1 {
    height:150px;
    overflow:auto;
    }

    Prueba de nuevo, si no te funciona guarda los cambios de todas formas para que pueda verlo.

    Saludos.

    ResponderEliminar
  32. Como siempre celebro tu talento mi seductor potro!!! Gracias por todo lo que nos das!!! Éxito!!!

    ResponderEliminar
  33. hola potri: queria preguntarte si sabes como arreglo my blog es que de un momento a otro el blog quedo con un espaciesote abajo del blog paresiera como si se uviera duplicado el espacio mira este es my blog http://capitulos-animecolombi.blogspot.com/

    ResponderEliminar
  34. _RosarioZapien_, no es ninguna molestia ;)

    Kary, por el contrario, gracias a ti por estar siempre!

    ResponderEliminar
  35. CRNDXA, prueba eliminando esta parte:

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: $(image.border.small.size);

    background: $(image.background.color);
    border: 1px solid $(image.border.color);

    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    }

    .post-body img, .post-body .tr-caption-container {
    padding: $(image.border.large.size);
    }

    .post-body .tr-caption-container {
    color: $(image.text.color);
    }

    .post-body .tr-caption-container img {
    padding: 0;

    background: transparent;
    border: none;

    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    }

    Sino queda dime cuál es el blog y las imágenes que tienen ese problema.

    ResponderEliminar
  36. hola potro que hay men yo de nuevo hijoles queria ver si podrias ayudarme con algo que ya ase tiempo que estoy buscando y no se como bueno en fin queria ver si por favor podrias ayudarme a poner este como cuadro de imagenes como el de esta pagina mira http://btemplates.com/2010/blogger-template-delta-red/demo/ ese cuadro de imagenes que esta queria ver si podrias amigo me ase mucha falta ojala puedas y muy buena tu pagina me a servido de mucha ayuda gracias saludos espero que puedas :)

    ResponderEliminar
  37. posteador web, ¿qué cambio hiciste antes de que eso sucediera?


    desmer_bennington, mira esta entrada.

    ResponderEliminar
  38. Hola Potro..
    Siiiiiiiiiiiii!.. Ha funcionadado.. Te lo agradezco!.. Ha quedado muy bonito.. Solo una cosita: Es posible modificar tambien el tamaño de la barra lateral?.. Me he fijado que si aumento el height, aumenta la capacidad de vision en elrecuadro y el tamaño de la barra.. Mi idea (unicamente si es posible, si no, ya va bien asi) es dejar el height en 240, pero que la barra no quede tan grande..
    Por otro lado te queria comentar otra cosa distinta. Al hacer click en uno de mis enlaces, me gustaria que se abriese otra pantalla aparte y no en la misma del blog. Lo digo por si no quiero seguir leyendo el enlace, y lo cancelo, tambien estoy cancelando el blog. Cuando hago click en el enlace y quiero volver al punto donde estaba leyendo en el blog tengo que usar las flechitas y a veces me pierdo entre tanto enlace..
    Muchas gracias por hacernos la vida mas llevadera. De lo contrario, todo seria mucho mas dificil o mejor dicho, imposible.
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  39. Hola Potro, navegando por el blog de JMiur (VAGABUNDIA) me he encontrado la siguiente entrada: Resumen Posts 3: Las miniaturas y dice algo de lo que quiero hacer, resulta que tengo aproximadamente 50 imágenes y quiero colocarlas en una entrada pero no todas tienen el mismo tamaño, lo que quiero es ordenarlas en 5 columnas y 10 filas, pero al tener tamaños diferentes es algo complicado, según pude leer en la entrada que te mencioné dice algo de colocar la imagen como un fondo y ocultar un 50% a cada lado, es decir, crear un contenedor con un tamaño fijo por ejemplo 200 x 200 px que muestre solo la parte central de la imagen, esto evitaría que dichas imágenes se distorcionarán, ahora viene mi pregunta ¿cómo logro hacer eso, cuáles serían los códigos a utilizar?

    Muchas gracias... :)

    ResponderEliminar
  40. Hola Hola!!
    Paso a contarte que tengo una duda con los Gadget...
    Yo sé que hay un modo de hacer esto... http://dl.dropbox.com/u/14132616/anigif.gif
    Me gusta porque así puedo poner algunos Gadget importantes y que no se vean, y ciertamente este modelo deslizante no me gusta, ni me convence tanto...
    Este es el blog en donde está...
    http://cunning-angel.blogspot.com/
    Sé que es una plantilla que descargó de algún lugar, pero constantemente la está editando... así que quería saber si tú sabes como hacerlo, o aunque no sea en este sitio, si me dirías por favor en donde puedo hallarlo tal vez...
    Ojalá puedas darme una mano =)
    Besitos ♥

    ResponderEliminar
  41. Hola Jose Frances,

    La barra se ajusta de acuerdo a la altura y contenido del gadget, no hay forma de darle una valor específico. Si la altura es corta y el contenido mucho la barra será más corta, si la altura es grande y el contenido poco entonces la barra se hará más larga.

    Respecto a los enlaces mira esta entrada que habla sobre ello.

    ¡Saludos!

    ResponderEliminar
  42. Lo siento, me espliqué mal. Al poner el album webpicasa en el blog se visualizan las fotos de manera automática, hasta que llega a la última,luego se queda parado con el botón para ver de nuevo.Lo que me preguntaba era, si fuese posible que se vieran de nuevo todas las fotos (de forma cíclica)y de manera automática (indefinidamente, mientras tengas la página abierta). Quizás cambiando algo de código??
    Gracias, de nuevo por las molestias. Un saludo

    ResponderEliminar
  43. Hola Víctor González,

    Sobre esa entrada no puedo responderte pues quien resultaría apropiado para hacerlo sería JMiur.
    De cualquier manera eso que se explica ahí es para darle un aspecto tipo "magazine" al blog.
    Lo que tú deseas parece que es algo completamente diferente, pues sólo quieres agregar varias imágenes en una sola entrada sin que estas se distorsionen.
    La manera que me parece más sencilla sería que agregues una tabla HTML en la entrada y dentro de cada celda agregues el código de las imágenes.
    Ahora, el código normal de una imagen subida desde Blogger es así:


    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://4.bp.blogspot.com/_qgZA1ny_dAs/TD98-xazupI/AAAAAAAAEew/g7K4nLeaSuo/s1600/brisa+marina.PNG" imageanchor="1" style="margin-left:1em; margin-right:1em"><img src="http://4.bp.blogspot.com/_qgZA1ny_dAs/TD98-xazupI/AAAAAAAAEew/g7K4nLeaSuo/s400/brisa+marina.PNG" border="0" /></a></div>

    En ese código hay 2 URLs, en el primero verás que tiene un s1600 eso indica que la imagen cuando se abra en otra ventana tendrá un máximo de 1600px
    Y la otra URL es la imagen que se muestra en el blog, esa ahí tiene una medida de 400px
    Lo que harás será cambiar esta URL de modo que que el código quede así:

    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://4.bp.blogspot.com/_qgZA1ny_dAs/TD98-xazupI/AAAAAAAAEew/g7K4nLeaSuo/s1600/brisa+marina.PNG" imageanchor="1" style="margin-left:1em; margin-right:1em"><img src="http://4.bp.blogspot.com/_qgZA1ny_dAs/TD98-xazupI/AAAAAAAAEew/g7K4nLeaSuo/s200-c/brisa+marina.PNG" border="0" /></a></div>

    Si pones este código en una entrada verás que la imagen se ha reducido a 200px pero además está recortada proporcionalmente, no se distorsiona.
    Así que lo único que tienes que hacer es cambiar el valor original en negrita por s200-c y con eso la imagen no se distorsionará al reducirla.
    De cualquier manera prepararé más adelante una entrada para explicar a detalle esa opción.

    Saludos.

    ResponderEliminar
  44. Hola potro: grande esto. Lo he probado y quedan muy chulos, de hecho he pensado que podría ser una solución para sustituir a mi menu desplegable tipo acordeón (el que te envié una consulta). Bueno, si me decido a usarlo como tal ya te digo a ver como queda.
    Muchas gracias desde Sevilla, España

    ResponderEliminar
  45. Hola de nuevo Potro, muchas gracias por tu respuesta, esto en eso vamos a ver que resulta. Tu blog tiene muchas cosas interesante y me ha gustado muchísimo una de ellas, como haces para colocar el aviso que tienes en la parte superior derecha, el que dice: Bienvenido (a) a Ciudad Blogger. Si es la primera vez que nos visitas te recomendamos suscribirte al feed para estar al tanto de las últimas actualizaciones publicadas. Me gustaría agregarlo a mi blog.

    ResponderEliminar
  46. Miss Varieté, por ahora no tengo una entrada sobre ello, pero hay varios tutos en la red para hacerlo, este es uno de ellos:
    http://sharysce.blogspot.com/2008/05/tabview-con-css-jquery.html

    matiasascanio, supongo que te refieres al slideshow de Picasa, si es así entonces no tiene ninguna configuración extra ese gadget, es bastante limitado.

    ResponderEliminar
  47. Muchas Gracias por el dato PERO NO LE ENTIENDO NADA!!!
    Estoy muy mal acostumbrada a este Blog y la forma en que explicas todo paso por paso...
    Así que me quedaré con las ganas hasta que tú hagas algo como esto.
    De todas formas, gracias por tomarte las molestias en buscarme un sitio.
    Besitos ♥

    ResponderEliminar
  48. Hola Potro,
    Ah perfecto!.. Esta todo claro, gracias!...
    Ahora estoy como un niño con zapatos nuevos y le quiero poner gadgets contraidos a todo.
    Estoy intentando ponerselo tambien al gadget ETIQUETA (Label1), pero no ocurre nada. Cada vez que intengo hacer algo yo solo, me sale super ortopedico. Esto es lo que estoy intentando poner; lo dejo grabado en mi blog por si te ayuda en algo: www.dondeandaras.blogspot.com

    #Label1 {
    height:240px;
    overflow:auto;
    }

    #LinkList1 {
    height:240px;
    overflow:auto;
    }
    ]]></b:skin>
    </head>
    Muchas gracias por tu ayuda
    PD: Se ve asi, medio raro porque he usado el conversor de HTML.
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  49. Sí me refería a ese, de todas formas, gracias. Un saludo

    ResponderEliminar
  50. Jose Frances, lo has hecho perfectamente, pero no sucede nada porque sólo tienes una etiqueta y como el contenido es poco no alcanza los 240px que pusiste.
    Cuando tengas muchas etiquetas podrás ponerlo de nuevo y verás que funciona sin problemas.

    ResponderEliminar
  51. Club Deportivo Gines, ojalá tengas buenos resultados :)

    Víctor González, mira esta entrada.

    ResponderEliminar
  52. miss variete hola saludos jeje perdon si me entrometo pero no me resisti en leer lo que buscabas mira mm no se si te sirva en esta pa ay muchos ejemplos de lo que tu buscas http://webdesignledger.com/tutorials/11-useful-jquery-tab-navigation-solutions aqui tambien es paso a paso XD lo unico malo es que esta en ingles pero para eso ay traductor google no?? XD bueno espero te sirva saludos....

    ResponderEliminar
  53. No las encuentro.. Y lo que pasa es que quiero que las imagenes se vean asi (Así aparecían cuando tenía las viejas plantillas): http://oi52.tinypic.com/5wdvkm.jpg y ahora con el diseñádor de plantillas se ve así: http://oi54.tinypic.com/dmpbph.jpg solo quiero que no se vean con ese espacio

    ResponderEliminar
  54. Entonces necesito saber en cuál blog lo has puesto para decirte si tiene arreglo o no.

    ResponderEliminar
  55. hola potro que hay men yo de nuevo hijoles queria ver si podrias ayudarme con algo que ya ase tiempo que estoy buscando y no se como bueno en fin queria ver si por favor podrias ayudarme a poner este como cuadro de imagenes como el de esta pagina mira http://btemplates.com/2010/blogger-template-delta-red/demo/ ese cuadro de imagenes que esta queria ver si podrias amigo me ase mucha falta ojala puedas y muy buena tu pagina me a servido de mucha ayuda gracias saludos espero que puedas :)

    ResponderEliminar
  56. Gracias, Potro. Lo he puesto y me ha salido a la primera!! Ha quedado estupendo!!
    Saludos,

    ResponderEliminar
  57. Hola Potra,
    Eres genial!..
    Mi blog esta quedando increiblemente bonito gracias a ti!...
    Muchisimas gracias..
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  58. desmer_bennington, ya te he respondido esa pregunta más arriba.


    observatorio, qué gusto que así haya sido :)

    ResponderEliminar
  59. jajaja potro seri bueno usarlo en el comentario 47 por ser tan largo xD

    ResponderEliminar
  60. Jajaja, ya sé, lástima que dentro de los comentarios no se puede :/

    ResponderEliminar
  61. Hay algo y es que este código no me ha quedado del todo claro ya que no se muy bien como implementarlo en mis Gadgets como por ejemplo como seria: con el MicrosoftTranslator el cual hiciste una entrada anterior.

    ResponderEliminar
  62. Esos gadgets los tienes dentro de un elemento HTML/Javascript, es a ese elemento al que se le aplicaría el truco. En la entrada está el ejemplo de cómo es el código de un gadget HTML/Javascript.

    ResponderEliminar
  63. eso si lo se pero es que hay una cosa que no me cuadra y es que los codigo rojo que van despues o detras de las palabras que estan en color como platiado como por ejemplo porque si es así yo no lo tengo y donde yo lo puedo poner ya que mis gadget no lo tienen y por cierto como tambien en el Gadget de archivos de entradas no se puede ver como seria ya que uso plantillas creadas como blogger ó es que se puede ver en otras plantillas.

    Y de nuevo muchas gracias por tu atención

    ResponderEliminar
  64. Todos los gadgets son igual en estructura sin importar el tipo de plantilla pues Blogger maneja el mismo tipo para todos y cualquier blog, así que esos códigos deben estar, sólo recuerda que debes expandir los artilugios para poder ver la estructura de los gadgets como el del ejemplo.
    En el caso del gadget de Archivos del blog es muy diferente el código al del ejemplo pero las partes plateadas sí las tiene, sólo tienes que buscarlas para saber dónde poner los códigos.

    Saludos!

    ResponderEliminar
  65. Hola potro. Como hago si en lugar de las flechitas (▼▲) quiero agregar un imagen? Eso seria genial!!!

    ResponderEliminar
  66. Heyyyyyyyyyyyyyy lo logre potro. Y yo solito. Estoy aprendiendo de lo lindo

    ResponderEliminar
  67. Hola... yo no consigo hacerlo funcionar en mi blogger. Ni con estas instrucciones ni con las de otros blogs. Alguien me ayuda? Directamente se queda encogido y no se despliega :(

    ResponderEliminar
  68. www.seloquetegusta.es (blog de contenido sexual, pa que nadie se asuste) :p

    ResponderEliminar
  69. No creo que nadie se asuste ;)
    Pues veo que tienes el script del primer paso pero no veo que se lo hayas aplicado a algún gadget, necesitaría que lo agregues a alguno (aunque sea un gadget de prueba) para que entre de nuevo a verlo y ya colocado pueda ver dónde está el problema.

    ResponderEliminar
  70. Lo saqué para que no se quedara bloqueado :)

    ResponderEliminar
  71. Ya lo hice, a ver que hago algo mal :)

    ResponderEliminar
  72. ¿Puede ser que como mi código es un desastre xq no tengo ni idea, y cada una de las modificaciones que hago en el blog las hago como puedo interfiera en todo esto? :(

    ResponderEliminar
  73. Pues podría ser porque por más que le busco el error no lo encuentro, podría ser eso que dices o el script de algún otro gadget, quizá el de la publicidad o de algo más.
    Como última opción lo que puedes intentar es poner el script del primer paso después de <head>

    ResponderEliminar
  74. Lo acabo de hacer... y nada :( Lo mismo me pasó cuando inténte seguir las instruciones para insertar una barra de menú con submenus... para mi que hay tanta cosa rara en la plantilla que por eso no funciona :p

    ResponderEliminar
  75. ¿Alguien que sea generoso e invierta su tiempo en solventar algunas cosillas de mi blog? :) Ofrezco la posibilidad de publicitar a esa persona en mi blog. :)

    ResponderEliminar
  76. Si tienes el mismo problema también con ese menú entonces sin duda es un problema de conflictos con algún otro script que no deja que Scriptaculous funcione.

    ResponderEliminar
  77. Tengo la misma duda que el usuario rey de r... Pero no comento como lo hizo, Cómo cambio las Flechitas por Una Imagen u otra cosa?
    Te agradeceria tu ayuda Potro

    ResponderEliminar
  78. Y otras cosa: Sabes por que se salen de los Cuadros de los titulos??

    ResponderEliminar
  79. Para cambiar las flechas por una imagen sólo busca esta parte del código:
    &#9660;&#9650;

    Y reemplázala por esto:
    <img src="URL de la imagen" />

    ResponderEliminar
  80. De lo otro que mencionas no sé a qué te refieres, necesitaría más detalles así como la dirección de tu blog.

    ResponderEliminar
  81. La verdad que sois muy amables x aquí :p Gracias por la ayuda :)

    ResponderEliminar
  82. Hola de nuevo Potro. Una pregunta ¿la velocidad a la que se expanden o contraen los gadgets es única o se puede modificar? Agradezco de antemano tu respuesta.

    ResponderEliminar
  83. Hola de nuevo Diabolus Rex,

    Sí puedes modificar la velocidad, sólo busca esta línea que se agrega:
    <a href='#' onclick='Effect.toggle(&quot;ExpandGadget1&quot;,&quot;slide&quot;); return false'>

    Y cámbiala por esta:
    <a href='#' onclick='Effect.toggle(&quot;ExpandGadget1&quot;,&quot;slide&quot;, {duration:2.0}); return false'>

    Eso que está en negrita es lo que indica la duración, por defecto es 1 segundo pero con ese 2.0 hará que tarde 2 segundos en deslizarse, si lo quieres más lenta sólo cámbialo por un valor más grande, y si lo quieres más rápido por una valor más chico, por ejemplo 0.3

    ResponderEliminar
  84. Una vez más gracias por tu ayuda Potro, me va a la perfección.

    ResponderEliminar
  85. MIl gracias por este truco, Potro, ya lo estoy usando en comicblog.com.ar
    Dos consultas, una sobre este truco y otra sobre otro tema:

    1) En este truco el gadget esta contraido y luego uno puede expandirlo, puede hacerse al reves? Es decir que al principio esté expandido y luego uno pueda contraerlo

    2) En los bloglist es posible modificar el tamaño de las miniaturas? Pueden achicarse de 72x72 a 50x50 por ejemplo?

    Gracias de antemano!!!
    Y ya estas agregado a mi directorio de tutoriales: www.blogtutorial.com.ar

    ResponderEliminar
  86. Hola F!X,

    Para que el gadget aparezca expandido desde el inicio sólo busca en esta parte del código que se agrega lo que está en negrita y elimínalo:

    </a><div align='center' id='ExpandGadget1' style='display: none; text-align:left;'>

    Para cambiar el tamaño de las miniaturas de ese gadget agrega antes de ]]></b:skin> lo siguiente:

    .blog-list-container .item-thumbnail img{
    height:60px !important;
    width:60px !important;
    }

    Esos valores los puedes cambiar por otros.
    Saludos y gracias por el enlace.

    ResponderEliminar
  87. Muchas grácia por tu aporte.
    Web muy recomendada,

    www.laencuestasemanal.tk

    ResponderEliminar
  88. Hola Potro muchisimas gracias!!! anteriormente visitaba el escparate y este blog, pero estuve ausente un tiempo, ya volvi, aunque por cierto es verdad que fallecio la dueña del Escaparate?, espero que no, Te habia enviado un correo hoy para saber como hacer mi lista de linksList expandibles, pense que no funcionaba este post, porque no decia para nuevas plantillas, te sugiero agregarle a los post que funcionan con las nuevas plantillas entre parentesis (Funciona en las nuevas plantillas), ahora aplicare este efecto a todos mis widgets, PERO PARA TERMINAR DE ARREGLAR MI BLOG SOLO ME HACE FALTA, REDUCIR EL RELLENO, MARGEN Y ESAS COSAS ENTRE WIDGET Y LOS UP,DOWN,LEFT Y RIGTH DE CADA SIDE BAR Y MAIN, POR FAVOR MIRA MI BLOG Y VERAS EL DESPERDICIO DE ESPACIO QUE HAY, GRACIAS ANTICIPADAS!!!!!!

    http://laregionesteenlinea.blogspot.com/

    ResponderEliminar
  89. Hola Xander,

    No es necesario aclarar que funciona para las nuevas plantillas pues la estructura de los gadgets sigue siendo igual que siempre, esa no ha cambiado ;)
    No sé si sea el navegador con el que ves tu blog porque la verdad es que yo no veo espacios de sobra en esas áreas, sin embargo aunque los hubiera te lo debería porque sigo sin adentrarme mucho en esas plantillas y ese planteamiento aún no lo logro resolverlo :(

    ResponderEliminar
  90. Gracias potro!!! de verdad gracias por tu atencion!! pero es que cada vez que busco ayuda, las explicaciones actuales no me aplican en estas nuevas plantillas, cuando sepas como disminuir los rellenos y bordes me avisas, no se si viste mi blog: http://laregionesteenlinea.blogspot.com pero es bien molesto todo ese espacio de mas, saludos.

    ResponderEliminar
  91. Saludos a todos, alguien sabe como configuro mi blog, realizado en las nuevas plantillas en mi caso la simple, para que cuando den click en una lista de enlaces, el nuevo enlace se abra en otra pestaña y no en la original, de forma que mi blog no se pierda y puedan continuar clickeando?, gracias anticipadas
    http://laregionesteenlinea.blogspot.com/

    ResponderEliminar
  92. Aquí está la información que necesitas:
    http://ciudadblogger.com/2009/06/abrir-lista-de-links-en-ventana-aparte.html

    ¡Saludos!

    ResponderEliminar
  93. Lo hice pero me abren en la misma ventana, te reduero por si acaso, que tengo widgets de listas de enlaces, por si se aplica diferente, lo hice incluyendo agregar el espacion en blanco que dicen tus notas, pero no tuvo ningun efecto. OTRA COSITA QUE ME FALTARIA SERIA QUE EL BUSCAR INTERNO DEL BLOG, PUEDA BUSCAR DENTRO DE LOS WIDGETS DE LOS LINK LIST, PUES ES UN DIRECTORIO Y SI SOLO BUSCA EN LOS TITULOS DE LAS ENTRADAS, NO ME SERVIRA DE NADA MI BUSCADOR INTERNO, OJALA HAYA UNA FORMA, MILLLLL, GRACIAS ANTICIPADAS POR TU GENTILEZA CON NOSOTROS!!!!

    ResponderEliminar
  94. El procedimiento es para ese gadget. Prueba de nuevo, si no te sale deja el código para que pueda verlo y saber dónde pueda estar el error. Sobre el buscador no conozco una manera que haga eso pues como el contenido es externo no veo la forma de que el buscador pueda localizar el contenido dentro de los sitios especificados.

    ResponderEliminar
  95. El asunto es que encuentro muchisimos lugares con esos codigos, quizas es queno se en cual de ellos hacerlo, es que se hace en cada lista de enlace de forma independiente?, por otro lado, como lo que tengo es un directorio, puedo hacer una entrada que tenga todos los registros, asi el buscar buscara en la parte interna de la entrada o solo en los titulos?, si buscara solo en los titulos hay alguna forma de que busque en la parte interna?, gracias hermano y disculpa pero es que has sido muy generoso, disculpa que pregunte tanto, es que deseo un buen producto, saludos.

    ResponderEliminar
  96. YA LO LOGRE, CUANDO HAGO CLICK CADA ENLACE SE ABRE EN UNA VENTANA NUEVA, DIOS MIO, PERO TENDRE QUE HACERSELO A CADA ENLACE Y SERAN COMO 100 PERO ES EXCELENTE HERRAMIENTA GRACIASSSSSSSSSSSSSSSSSSSSSSSSSSSSSS........ya solo me falta saber si tengo una forma de que mis buscador interno del blog, puede buscar en lo interno de una entrada y no solo en el titulo, para copiar y pegar todo dentro de una entrada y si es posible, cuando el buscador encuentre el telefono ira directo al telefono que esta dentro de la entrada, suponiendo que sean miles?, solo a la entrada, graciasssssssssssssssss

    ResponderEliminar
  97. Si usas el Motor de búsqueda personalizada de Blogger hará más completa la búsqueda, por lo tanto habrá mayores posibilidades de que encuentre los número telefónicos que estén en las entradas.

    ResponderEliminar
  98. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  99. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  100. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  101. Listo mi estimado Potro, ya soluciones el problema haciendo algunos cambios, tengo un extraño sindrome: Cuando no doy con algo te escribo para que me ayudes y resulta que a los pocos minutos doy con la solucion, todo esto ocurre despues que te escribo, no antes, Jeje..Que tal?. disculpa tanta molestia hermano y mil gracias por tu continuo aporte. Saludos!.

    ResponderEliminar
  102. A muchos les ocurre lo mismo no te preocupes ;)

    ResponderEliminar
  103. Escribo aqui, porque no encontre tu entrada sobre el buscador avanzado de google, mira a mi me funiona a la perfeccion, lo que pasa es que viene al parecer con una configuracion por defecto que le dice diferencias de mayusculas y minusculas si encontramos la forma de que no le importe al buscador esa diferencia, ese buscador seria perfecto, sabrias como modificar esos codigos?, ese buscador es excelente y realmente no hay que espserar que google cargue ni que uno publique nada, pues luego de mi hipotesis publique algo y lo encontro inmediatamente, tu que eres duro en esto fijate los codigos a ver si tiene una parte para eso y logre ponerlo que no discrimine entra mayusculas y minusculas

    ResponderEliminar
  104. Hola Xander,
    La entrada de buscador es esta:
    http://ciudadblogger.com/2009/11/motor-de-busqueda-personalizada-de.html

    Pero no, eso lo maneja directamente Google y ahí sí nadie puede meter mano. Pero si tu teoría fuera cierta basta con que agregues un aviso en el blog que diga que usen mayúsculas y minúsculas al hacer sus búsquedas.

    ResponderEliminar
  105. SI ESO PUSE UN AVISO, DICE: BUSCAR (Dentro del blog) escribir todo en mayuscula (Porque asi escribi el nombre de las empresas), pero tu sabes que la gente casi no lee, lo digo por experiencias, gracias de nuevo.

    ResponderEliminar
  106. Hola Potro.
    Gracias por este truco! Lo acabo de poner en mi blog.
    Lo vi ayer en el Escaparate de Rosa (Q.E.P.D.), pues ella dejó unos gadgets en su sidebar con ese efecto. Como me gustó, vine buscando por acá la manera de hacerlo, y lo encontré en la Ciudad.
    Se lo apliqué al gadget de etiquetas y a otro gadget que es un linklist que tiene scrollbar, para probar. Funciona bien, excepto, por un detallito (que tampoco es como para afligirme, pero me gustaría arreglarlo, si se puede).
    Es que las imágenes de las flechitas de expandir y contraer no me aparecen al inicio del título del gadget (como en tus ejemplos), sino que, curiosamente, siempre me aparecen a la derecha, al final del título. Y no se ve muy estético, pues queda disparejo, ya que unos títulos de los gadgets son más cortos que otros.
    Preferiría que todas las flechitas quedaran alineadas a la izquierda, es decir, justo antes del título del gadget, como lo tienes en tu blog de pruebas.
    ¿Sabrías por casualidad cómo arreglar esto?
    Sino, de todas maneras pienso dejar ese truco instalado, pues me gustó y creo que es muy útil.
    Ah, ¿se podría hacer que el efecto deslizante sea menos lento? Si no, no importa.
    Gracias, y disculpa las molestias.
    Saludos!

    ResponderEliminar
  107. Hola Vicky,

    Revisa que el código de las flechas esté antes de <data:title/> y no después. No se me ocurre qué otra situación podría ser por la que se posiciona a la derecha y no a la izquierda.

    En cuanto a la velocidad del desplazamiento sí se puede modificar, mira el comentario #89, ahí están las indicaciones para ajustarla.

    ¡Saludos!

    ResponderEliminar
  108. Hola Potro.
    Muchísimas gracias por las indicaciones. Voy a probar para ver qué tal me va.
    Saludos!

    ResponderEliminar
  109. Como puedo poner las flechas ▼▲ de colores (distinto al texto) ?

    ResponderEliminar
  110. Prueba cambiando las fechas por esto:
    <span style="color:#00FF00;">&#9660;&#9650;</span>

    ResponderEliminar
  111. Gracias, una consulta más para cuando retomes la web: cuando carga el blog el contenido oculto del gadget tambien carga a pesar de no ser visible sino hasta darle click a las ▼▲ .Habrá alguna alternativa, como un script, que haga que el contenido del gadget recién cargue cuando se le da click.
    Este efecto que explicas serviría bastante para no relentizar las webs, si es que se puede lograr esta característica.

    Muchas gracias por tu web, y que disfrutes de tus vacaciones.

    ResponderEliminar
  112. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  113. hola!
    una duda. como los pones para los gadgets de blogger, asi como los de archivos de blog.
    gracias!! Espero te la pases super en tus VACAciones!!

    ResponderEliminar
  114. jonathan[i2000], de hecho la propiedad que se usa es el display:none así que en teoría no debería afectar, es distinto cuando se usa el visibility:hidden; pues ahí sí lo carga, pero no lo muestra. De cualquier manera, es casi imposible que algo así suceda, pues el navegador siempre lee todo lo que tenga la página.

    DJCosplay, gracias! ¿te refieres al icono en forma de lista? Eso se hace usando un poco de CSS simple:
    http://ciudadblogger.com/2009/06/poner-iconos-en-etiquetas-y-otros.html

    ResponderEliminar
  115. ejejeje, no, me refiero a como pusiste este efecto a la etiquera de entradas resientes (blog archive) Esque si me sale el efecto en los gadgets en HTML pero los gadgets de blogger no.
    a eso es a lo que me referia, porque no me da las mismas opciones k en HTML, o sera la plantilla.
    Gracias

    ResponderEliminar
  116. como q te mereces q den clic en publicidad hehehe suerte

    ResponderEliminar
  117. ecomo pusiste este efecto a la etiquera de entradas resientes (blog archive) Esque si me sale el efecto en los gadgets en HTML pero los gadgets de blogger no.
    a eso es a lo que me referia, porque no me da las mismas opciones k en HTML, o sera la plantilla.
    Gracias

    ResponderEliminar
  118. De hecho el gadget de Archivo del blog (el que yo tengo) no tiene ningún efecto, ¿tú ves alguno? o.O

    ResponderEliminar
  119. XDXDXDXD!!!

    ecomo pusiste este efecto a la etiquera de entradas resientes (blog archive) Esque si me sale el efecto en los gadgets en HTML ¡¡pero los gadgets de blogger!!

    los gadgets html si me funciona el efecto pero en los gadgets de goofle como el "Archivos de blog, Encuestas, imagen" esas como lo isite en elos gadgets de google en el blog de pruevas...

    uuuuffff Espero que me entiendas ehehe
    gracias de nuevo

    ResponderEliminar
  120. Ah ya, ahora sí entendí :P
    Es el mismo procedimiento, por eso menciono en la entrada:

    "Es seguro que la estructura de algunos gadgets no se vean como el del ejemplo pues éstos varían según el tipo de gadget que sean, pero para saber dónde debemos poner el código sólo hay que guiarnos por los códigos que están en color gris, así que sólo localiza la primera línea gris y debajo pega el primer código en rojo, luego localiza la segunda parte gris y ahí deberás pegar alrededor lo otro en color rojo, y por último busca la última línea gris y arriba de ella pega el último código rojo."

    Así que, sólo localiza esas partes en gris y pega los códigos rojos, funcionará para cualquier gadget ;)

    ResponderEliminar
  121. :P
    ammmm ya pude :D
    ammmm pero mi plantilla si es dirente!! tube k acer lo un poco diferente a como se ve en el ejemplo, pero pues ya lo logre.
    gracias de nuevo.

    ResponderEliminar
  122. De hecho ahí ya no depende de la plantilla, la estructura de equis gadget es igual para todos. El problema es que el gadget de HTML/Javascript no es igual al de Etiquetas, y el de Etiquetas no es igual al de Seguidores, etc.

    ResponderEliminar
  123. Hola a tod@s. Potro, serías tan amable de decirme que he hecho mal en el Gadget "Algunos Sitios que nos Enlazan" ? Está a mano izquierda, justo debajo de "Maestros del Blog". Te lo agradezco de antemano. www.alzheimeruniversal.blogspot.com). Espero no te moleste te haya linkeado. Gracias por tu trabajo.

    ResponderEliminar
  124. Puede ser que aunque el jQuery que usas está "parchado" aun así no haga efecto y genere incompatibilidad con Scriptaculous. O, que los enlaces se abren en otra ventana y al dar click no da tiempo que se expanda el gadget.

    ResponderEliminar
  125. Hola El Potro, te comento que al hacer clic me remite, es decir, hace el efecto de la "flecha para subir" que solemos tener al final del blog, y añade una almohadilla "#"a la dirección del blog en la barra de direcciones. Con estos datos podrías darme una solución?. Necesito que el blog cargue más rápido, y este truco además me gusta mucho pues visualmente no recarga tanto el blog. Agradecido de antemano por tu ayuda.

    ResponderEliminar
  126. El signo de gato (#) no es el problema, ese signo aparece ahí porque se necesita un enlace para dar click, y como no usaremos una dirección Web entonces añadimos el signo de gato para que no dirija a ninguna parte. El problema, como te decía, puede ser que tienes un código para que se abra en otra ventana. Si lo seguirás usando entonces tienes que darle una instrucción al enlace para que ese enlace en específico no se abra en otra ventana, así que en esta parte del código del gadget agregarías lo que está en negrita:

    a href='#' target="_parent" onclick='Effect.toggle

    ResponderEliminar
  127. Hola, he puesto el target="_parent" pero sigue sin funcionar. ¿Serías tan amable mirarlo buscando en el código 'Algunos Sitios que nos enlazan'
    El caso es que lo monté como pude, porque mi plantilla no coincidia plenamente con todo el código como lo muestras arriba y me puede faltar algo como un b:if o un div o cualquier cosa, pero yo no entiendo de estas cosas y solo copio y pego y cuando no me funcionan simplemente deshago los cambios, pero estoy seguro de que con solo mirarlo vas a ver el error. Te agradezco mucho

    ResponderEliminar
  128. Desde aquí no puedo ver esos detalles de la plantilla, pues al ser publicado el blog dejan de verse los códigos tal como tú los ves en tu plantilla.
    Sólo debes cerciorarte que los códigos en color rojo estén antes o después de los códigos en color gris que están de referencia. Es importante que estén antes/después de esos códigos grises, eso permite que funcione correctamente.

    ResponderEliminar
  129. De veras que no me entero mucho. Te agradecería infinitamente mirases la captura: http://www.box.net/shared/afvcfz57mc8t7zp0lti0 a ver si ves el error.

    ResponderEliminar
  130. El último </div> en color rojo debería ir antes de:
    <b:include name='quickedit'/>

    También puede ser que en definitiva haga conflicto con jQuery, quizá poniendo el script de Scriptaculous después de <head> haga que funcione.

    De igual forma recuerda poner el target="_parent" donde te indiqué, sino lo pones seguirá abriendo en otra ventana al dar click ahí:

    <a href='#' target="_parent" onclick='Effect.toggle(&quot;ExpandGadget1&quot;,&quot;slide&quot;); return false'>

    ResponderEliminar
  131. Vale Potro, voy a ver si lo entiendo mirando esta explicación con mi código y lo de arriba del todo. El target lo quité antes de la captura porque no funcionó. El previo no me dio error, pero luego al ir a revisar el código de nuevo se habia puesto al final de la linea, no donde lo puse yo, es decir, después del "#". Creo que se puso después de return false'>
    Sobre lo de Scriptaculous sé que en su día metí algo de eso, pero no tengo ni idea de donde ni para que era. Voy a buscarlo y proba a cambiarlo de sitio. Mil gracias y disculpa las molestias. Por cierto, ¿puedo enviarte un privado a alguna parte para proponerte una solución a todas estas cosas y algunas más a cambio de algo?

    ResponderEliminar
  132. Nada, me remite al principio del blog. Me vuelve a cambiar el target después de hacer los dos cambios. Lo del último div y el propio target=" _parent". Fijate en esta captura. Si no te importa envíame un correo y te hago una pequeña oferta. Es importante.

    ResponderEliminar
  133. Que lo cambie de lugar no importa, es normal que a veces ya guardados los cambios algunas cosas estén en otro orden, lo importante es que esté bien puesto. ¿Cómo saber si el target=" _parent" funciona? pues haciendo click en el enlace para desplegar el gadget, sino se abre otra ventana entonces está bien puesto.
    Si nada de eso resuelve el problema entonces sin duda el origen está en el gadget del Fanbox deslizante que usa jQuery que como te dije, no es compatible con Scriptaculous (el script que se usa para que el gadget se deslice), así que habrá que tomar la decisión de quedarse con el Fanbox o con el gadget desplegable.

    Sobre la consulta claro que puedes hacerlo siempre y cuando se trate de un tema que no esté explicado en el blog. En el formulario de contacto que está arriba en el menú puedes enviarme un correo.

    Saludos.

    ResponderEliminar
  134. Pues nada,
    Ya que he venido a visitarte y leerte y así enterarme decómo está el mundo, me decido....
    Me han dado algunos premios que aún no he podido recoger, me gustaría ponerlos en la sidebar pero no con expander y contraer, simplemente darle una altura y que se vayan deslizando. Estuve buscando por tus cosas como hacerlo pero como no sé prefiero tus recomendaciones y consejos.
    Besos a montones, como siempre.

    ResponderEliminar
  135. Gracias Potro, te enviaré el mensaje en cuanto me despeje un poco. Quiero preguntarte sobre scriptacolous, pues sé que lo puse, pero ni recuerdo para que, ni sé si sabría quitarlo. Pero si te es complicado entenderme, pues creo que no me llego a explicar bien por el desconocimiento que tengo de los blogs y los cambios en las plantillas, te envío el mensaje y a ver si acordamos algo para unas mejoras y unas soluciones que se me escapan de las manos. Muchas gracias de nuevo y un saludo a tod@s

    ResponderEliminar
  136. Hola Patricia,

    En realidad es sencillo eso, sólo necesitas localizar la ID del gadget, por ejemplo, le pones de título "PREMIOS", luego sin expandir artilugios busca la palabra PREMIOS, ahí verás el código del gadget en una línea; en esa misma línea verás algo como id='HTML90'
    En ese ejemplo el ID del gadget es HTML90, con ese dato agrega antes de ]]></b:skin> esto:

    #HTML90 {
    height:100px;
    overflow:scroll;
    }

    Cambia ahí la ID verdadera de tu gadget, y donde dice 100px es la altura, la puedes modificar por la que gustes.

    ¡Besos!

    ResponderEliminar
  137. alzheimeruniversal.org, Scriptaculous es un script que sirve para dar efectos, lo tienes porque este mismo truco pide que se ponga ese script pues es el que le da el efecto deslizante. Nos vemos y espero tu mensaje ;)

    ResponderEliminar
  138. Potro, otro truco que me ha ayudado a mejorar el blog. No acabaré nunca de darte las gracias.

    Un abrazo.

    ResponderEliminar
  139. Ni yo a ustedes por tan amables comentarios como siempre. Otro abrazo para ti!

    ResponderEliminar
  140. le agrege mi toque personal :3

    en este gif no es nada del otromundo pero pss se ve bn

    ResponderEliminar
  141. Supongo que por la complejidad de mi menú no me permite usar este script tan bueno:

    http://estudioantropologia.blogspot.com/

    ¿Podrías decirme cómo puedo expandir un gadget dentro del propio menú de gadgets?

    Gracias !!

    ResponderEliminar
  142. Puedes hacer algo mucho muy similar pero con estos pasos:
    http://ciudadblogger.com/2009/10/expandir-y-contraer-partes-de-una.html

    ResponderEliminar
  143. Estupendo, eres el mejor...
    Excelente!!!

    ResponderEliminar
  144. Qué bueno que te ha sido útil Ure :)

    ResponderEliminar
  145. Hola Potro otra vez molestándote y para estos gadgets como seria ??? el de las discografias y el de los géneros el de las discografias es un gadget de texto y el otro es el gadget de etiquetas

    ojala me puedas ayudar salu2 q tengas buen dia

    folkmetalmusik.blogspot.com

    ResponderEliminar
  146. Hola FINEM, es de la misma forma. Como dice en la entrada, sólo debes guiarte por los códigos en color gris.

    ResponderEliminar
  147. ¡Hola, El Potro! Yo de nuevo ^_^ Resulta que, por alguna razón que obviamente desconozco, no puedo aplicar ningún tipo de "expandir y contraer" en los gadget Entradas Aleatorias y Últimos Comentarios porque el código es ligeramente diferente al resto de los gadget. La parte que me tiene confundida en el html y en donde siempre me sale error es hacia el final del código del gadget, entre data:nonSocialFragment y b:include name='quickedit'
    Siempre me sale error señalando que que código debe terminar en b:if

    ResponderEliminar
  148. Hola Gabriella, sólo identifica los códigos que están en color gris, esos te servirán para identificar dónde deben ponerse los códigos.
    Si lo has puesto ahí y tampoco funciona dime cuáles son los ID de esos gadgets que no se dejan.

    ResponderEliminar
  149. esto si que esta buenisimo gracias por el post encerio
    esto realmente interesante

    ResponderEliminar
  150. Bueeeeeno, no sé muy bien si el ID de los gadget será algo como esto, pero sé que me corregirás si me equivoco... ^_^
    b:widget id='Gadget2' locked='false' title='Últimos Comentarios' type='Gadget'>
    Éste es uno de los que me da problemas y siempre me sale algo así:
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:if" must be terminated by the matching end-tag "".

    Error 500

    Es raro porque los otros gadget no me dieron ese tipo de problema.
    El gadget de Entradas Aleatorias también tiene el mismo problema y creo que la estructura del código es igual a la de los comentarios.

    ResponderEliminar
  151. Una cosita más ^_^ ¿La apariencia de las flechas depende del diseño de la plantilla? No me gusta mucho que en mi blog se vean tan grandes... las prefiero más pequeñas ^^

    ResponderEliminar
  152. Eliseo Insfran, qué bueno que te ha gustado :)

    ResponderEliminar
  153. Gabriella Yu, en esos gadgets no se puede, como no son originales de Blogger tienen una estructura diferente.
    A las flechas les puedes cambiar el tamaño si este código:
    &#9660;&#9650;

    Lo cambias por este otro:
    <span style="font-size:10px;">&#9660;&#9650;</span>

    ResponderEliminar
  154. Qué lastima... Bueno, no importa, algún día se podrá, creo... XD

    ResponderEliminar
  155. Hola,

    alguien podría decrime el código html de un gadget para editar una lista sin que sea despleglabe?

    Un saludo

    http://migenuinaesencia.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola ñu, no he entendido bien a qué te refieres, ¿me podrías dar un ejemplo o más detalles?

      Eliminar
  156. Hola Potro! Mi comentario no tiene mucho que ver con el post, pero quería preguntarte algo... quisiera hacer que las entradas se ajusten con la imagen de fondo que tiene http://danpenguicp.com ¿Me podrías ayudar? ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Danpengui, no he entendido a qué te refieres, ¿me puedes dar un ejemplo?

      Eliminar
    2. Por ejemplo, la imagen de fondo de los posts tiene la sección azul para los gadgets y la blanca para los posts, y mi intención es hacer la sección de los posts un poco mas grande para que encaje con la zona blanca.

      Eliminar
    3. Gracias por los detalles extras. Busca esta parte:


      #maint .guide{
      width:574px;
      margin-bottom:50px;
      }


      Eso que está en negrita es el ancho de las entradas, puedes ponerle un valor más grande hasta que se ajuste a la medida que deseas.

      Eliminar
    4. Si me sirvió :) Muchas gracias Potro!

      Eliminar
  157. Hola EL Potro,
    La plantilla de mi blog es diferente y el html del gadget que te sale a ti no es como el que me sale a mi, te dejo una imagen para que lo veas: http://dl.dropbox.com/u/11723636/Plantilla.png
    Como se hace entonces?
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Josep-Pepe, el código de ejemplo que tengo en la entrada es de un gadget HTML/Javascript. Lee toda la entrada para que veas dónde poner los códigos cuando se trata de otros gadgets.
      Saludos.

      Eliminar
    2. Hola EL Potro, ya encontre la forma de hacerlo. Pero ahora tengo otro problema, he puesto este efecto en muchos gadgets y cuando quiero abrir uno, se me abre solo el primero de la columna. Yo he puesto el codigo bien. Compruebalo tu mismo: www.josep-pepe.blogspot.com

      Saludos

      Eliminar
    3. Recuerda que tienes que cambiar el ID a cada uno (código azul).

      Eliminar
  158. Es verdad, lo siento potro por hacerte perder el tiempo. La proxima vez me leere más las entradas.
    Saludos.

    ResponderEliminar
  159. Buenas noches, pues aquí estoy intentando hacer este nuevo reto que es interesantísimo pero para variar no me sale jejejeje. Hay muchas cosas como ya te comenté que no son iguales en mi HTML de la plantilla y seguramente coloco algo mal y cuando le doy a vista previa, me ha desaparecido "blogs de interés" . Quería pegarte el codigo que puse pero no me deja enviarlo me dice que mi HTML no es aceptable grrr.
    ni expandir ni contraer ni ná de ná. A ver si me puedes dar alguna indicación. Gracias
    Mi web es elrincondewendyb.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Hola Wendy, la plantilla que usas es original de Blogger, así que casi todo lo que encuentres en el blog se aplica para tu plantilla. Los gadgets en cualquier plantilla son los mismos, por lo tanto el código de los gadgets del mismo tipo son para todos igual.
      Ten en cuenta que el que he puesto de ejemplo es un gadget HTML/Javascript, si lo vas a aplicar a otro gadget distinto debes guiarte por las líneas de color como se menciona en la entrada.

      Eliminar
  160. Hola potro esta muy bueno este efecto pero tengo un pequeño problema talvez me ayudes, por q se lo agregue a las etiquetas y sale todo vien pero cuando le doy click para expandir no se expande nose que pasara talvez pudieras ver mi blog http://animeshentai-sd.blogspot.com/ es pagina para adultos y talvez me ayudes de como hacer gracias..

    ResponderEliminar
  161. Hola ya solucione el problema y ahora si funciona gracias amigo...

    ResponderEliminar
    Respuestas
    1. Llegué tarde pero me alegra que ya lo hayas resuelto :)

      Eliminar
  162. Hola potro, tanto tiempo, puse todo igual pero me dice que no esta bien formada :( *"No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "a" must be terminated by the matching end-tag. Error 500"*
    Lo intente poner para el gadget del archivo del blog, ¿me podrias dar una mano?
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Dante, en el caso del gadget de Archivo, pon los primeros códigos donde se indica tomando como referencia los colores grises, pero el último en rojo, el DIV de cierre ponlo justo antes del </b:includable> que encuentres. Digo esto porque en el caso de ese gadget tiene como tres </b:includable> y si pones ese último en algún otro entonces te dará error.

      Eliminar
  163. Hola Potro, he leído en los comentarios como cambiar el color y como cambiar el tamaño de las flechas... pero... ¿cómo cambiar las 2 cosas? He intentado poner una span delante de la otra pero no funciona jejeje. Espero que haya una solución. Gracias

    ResponderEliminar
    Respuestas
    1. Hola Wendy, puedes hacerlo en esta parte:
      <h2 class='title'>

      Cambiándolo por esto:
      <h2 class='title' style="font-size:14px; color:#000;>

      Saludos.

      Eliminar
  164. buenos días potro:
    he usado este truco en dos de mis blogs y han funcionado perfectamente hasta hoy, que he intentado desplegarlo y no hay forma. No sé que puede haber pasado. He entrado en tu blog de pruebas y funcionan correctamente. Te dejo la dirección de los blogs en que los uso por si puedes echarle un vistazo.
    Gracias de antemano
    http://presicdg.blogspot.com.es/
    http://maticdg.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. A mí me ha pasado lo mismo. Creo que ha sido a raíz de probar el nuevo gadget de Blogger de "Insignia de Google+"
      Mi blog: ttm22.blogspot.com

      Eliminar
    2. En las páginas individuales parece que funciona correctamente.
      Falla en la página principal. Misterios de Blogger...

      Eliminar
    3. Es verdad, en las páginas individuales funciona perfectamente, solo falla en la principal. Qué cosa más rara!!!

      Eliminar
    4. Mi blog: josep-pepe.blogspot.com

      Eliminar
    5. Misterio total. A mi me pasa igual.

      http://cartasamifuturoyo.blogspot.com.es/

      Dios total Potro si puede ayudarnos ;)

      Eliminar
    6. Por cierto, tampoco funcionan los botones "ir arriba e ir abajo". El efecto deslizante no va. Y como dicen por aquí arriba, sólo ocurre en la página principal.

      Eliminar
    7. josep-pepe y mi yo del pasado, he probado vuestros blogs en google chrome y si van. Esto es cada vez más raro!!!

      Eliminar
    8. corrijo, sí va http://cartasamifuturoyo.blogspot.com.es/, pero no josep-pepe. Ese último funcionó la primera vez que entré, no así la segunda. Cuando clico para abrir lo que hace es que me envía a la cabecera del blog.

      Eliminar
    9. Pues yo lo estoy probando en google chrome 18 y no me funciona :S

      Eliminar
    10. Pues a mi no me funciona mi propio blog y eso que uso chrome. Ésto es increíble...

      Eliminar
  165. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger