Expandir y contraer gadgets con jQuery

4 de mayo de 2014 87 comentarios ,
Hace ya algún tiempo vimos cómo expandir y contraer gadgets usando Scriptaculous y Prototype, es un método que funciona bien, pero hay quienes usan jQuery y no quieren cargar más librerías en su blog, así que en esta entrada veremos cómo conseguir el mismo resultado pero usando jQuery.


Expandir y contraer gadgets puede servir a quienes tienen muchos gadgets y quieren que la sidebar se vea más despejada mostrando sólo los títulos de los gadgets, y mostrando el contenido sólo cuando el usuario quiera verlo. Puedes ver un ejemplo en este blog de pruebas, al dar click sobre el título del gadget éste se expandirá.

Para poner estos gadgets expandibles sólo necesitas jQuery, si aún no lo tienes entra en Plantilla | Edición de HTML, y después de <head> agrega esta línea:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Y ahora, para aplicar el efecto expandible -y deslizante- a algún gadget, localiza en la Edición de HTML el gadget al que se lo quieres aplicar. Por ejemplo, un gadget del tipo HTML/Javascript sería así:
<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
&#9660;&#9650;

<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class='expandir1' style='display: none;'>

<data:content/>

</div>
<script>$(document).ready(function(){$(&#39;#expandirGadget1&#39;).click(function(){$(&#39;.expandir1&#39;).slideToggle(&quot;slow&quot;)})});</script>

</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Agrega lo que está en color rojo, y listo.

Para guiarte dónde poner los códigos:

El primer código en rojo va alrededor de la etiqueta <data:title/>
La otra parte en rojo va después de <div class='widget-content'>
Y la última va antes de
</div>
<b:include name='quickedit'/>

Nota que en color azul verás un ID y una clase, ambos aparecen dos veces. Si pusieras otro gadget expandible deberás cambiar tanto los IDs como las clases, por ejemplo expandirGadget2 y expandir2

En el primer fragmento que añadimos verás que aparecen estos caracteres: &#9660;&#9650;
Esas son las flechas de arriba y abajo ▼▲ puedes cambiarlo por otro caracter, otro texto, o incluso por una imagen:
<img src='URL de la imagen' border='0' width='14px'/>


El código de ejemplo es para los gadgets HTML/Javascript, pero se puede aplicar a cualquier otro, sólo basta con identificar la etiqueta <data:title/> del gadget (que es donde va el primer código), y el contenido del gadget (que es donde va el segundo código).

Quizá deba aclarar que esto no hace que el blog cargue más rápido ya que el contenido se sigue cargando aun cuando esté oculto para el usuario. Es únicamente para mostrar menos espacio en la sidebar ya que algunas veces tenemos gadgets que ocupan demasiado espacio y esta es una buena manera de mostrar el blog más prolijo.


87 comentarios en:

" Expandir y contraer gadgets con jQuery "

  1. Muy buena,
    queria pregusntarte, como hiciste lo de poner los 3 gadgets de siguenos en un solo hueco?

    PD: El nuevo diseño del blog es aparentemente mas simple pero me gusta mucho! ^^

    ResponderEliminar
    Respuestas
    1. El potro ya tiene un tutorial de eso: http://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html

      Sólo tienes que hacer los cambios al diseño

      Eliminar
    2. Esa es una opción. Yo use esta (con jQuery) que nos comparte Karla:
      http://www.compartidisimo.com/2011/06/crear-una-seccion-con-pestanas-para.html

      Eliminar
    3. Hola. Necesitaba hacerte una pregunta y no se si es por aqui.
      En mi blog web: www.quenieve.es, no soy capaz de quitar una rayita lateral blanca que aparece. No se si será la sidebar right, pero he probado de todo y ya no se que mas hacer. Espero tu respuesta. Muchas gracias. Tu pagina me ha ayudado muchisimo. Un saludo. Marisol

      Eliminar
  2. Muchísimas gracias, Potro. Tuve que quitar el otro método sin jquery por incompatibilidad de librerías (ni siquiera con el hack) pero con este método se me solucionó. ¡Qué haríamos sin ti!

    ResponderEliminar
  3. Volvió la camiseta jajaja no sé los demás pero yo si compraba una. En serio deberías venderlas Potro. Estaba pensando usar este efecto para un sorteo tipo búsqueda del tesoro junto con las condicionales de blogger. Ahora me lo haz dejado más fácil.

    Saludos!

    ResponderEliminar
  4. muchas gracias muy bueno lo aplicare ;)

    ResponderEliminar
  5. Como no sé dónde escribir, lo digo aquí...ya son muchísmas las veces que me has ayudado, Potro; por no hablar de todos los recursos/ideas que ma ha aportado tu blog. Por ello, en vez de decirte: ¡que Dios te lo pague!, te acabo de hacer una pequeña donación por PayPal (5$). No es mucho pero espero que ayude un poquito a que tu blog continúe en activo. Muchísimas gracias desde el País Vasco.

    ResponderEliminar
    Respuestas
    1. Muchísimas gracias Asier, no hay donaciones pequeñas, todas son una gran ayuda para que este sitio siga en pie.
      ¡Mil gracias otra vez!

      Eliminar
  6. El Potro siempre compartiendo lo mejor. Me gusta mucho más tu nuevo diseño amigo, me identifico mucho con tanta limpieza, además que le prestas mucha atención a los detalles, para la muestra el corazoncito que tienes en la parte inferior derecha con el botón de redes.

    ResponderEliminar
    Respuestas
    1. Qué amable Diego. A mí también me atraen mucho los diseños minimalistas, y me alegra no ser el único :)

      Eliminar
  7. Hola Potro, como estas? Espero que muy bien. Nose si te acordaras de mi, yo soy "FasteN" el que sabia preguntarte y molestar siempre con preguntas absurdas jaja. La verdad que me alegro muchisimo que hayas vuelto, y bueno ya que estamos aqui te queria hacer una pregunta (fuera del tema posteado).
    Quisera saber como puedo achicar el espacio en blanco que hay entre el TITULO DEL GADGET y su contenido, asi como tambien achicar el espacio que hay en la parte de lo que serian las ENTRADAS achicar ese espacio que hay entre ellas (las entradas) y la parte del GADGET que se encuentra arriba (S3S SLIDER: MOSTRAR CONTENIDO DESTACADO).

    ResponderEliminar
    Respuestas
    1. ¡Hola FasteN! qué gusto leerte de nuevo :)
      Busca esta parte:
      h2 {
      margin: 0 0 1em 0;

      Ese 1em es el espacio que hay debajo del título del gadget y el contenido, si lo pones en 0 se eliminará dicho espacio.

      En cuanto a lo otro, puedes aplicar un margen superior negativo al .main-outer, por ejemplo:
      .main-outer {margin-top:-40px;}

      Eliminar
    2. Muchisimas gracias por tu respuesta, funciono a la perfeccion!. Ahora quisiera saber como puedo reducir ese espacio que tiene el PIE DE PAGINA DE LA ENTRADA que es como si fuera que tendria algunas opciones. Osea, yo a esa parte (pie de pagina de la entrada) solamente le puse:

      "Publicado por"
      &
      "Fecha & Hora de la Publicacion"

      Pero debajo hay un espacio como si fuera que hay OTRA/S OPCION/OPCIONES aplicadas, pero la verdad que no tengo ninguna mas activadas mas que la que te nombre, y el nombre no es taaan largo como para que ocupe espacio debajo, asi que la verdad ese espacio nose porque se hizo, pero me encantaria eliminarlo y dejar solamente el espacio de las opciones que yo seleccione que se muestren nada mas. FasteN

      Eliminar
    3. No sé si ya pudiste eliminarlo, porque he entrado pero no veo ningún espacio que esté sobrando. Veo un recuadro gris y dentro el autor y la fecha/hora, pero nada más.

      Eliminar
    4. Ah entonces solamente lo veo yo. En fin, mientras sea asi no hay problema entonces. Gracias por tu pronta respuesta Potro, como siempre ayudando a todos, en lo que puedes. Gracias, un abrazo grande y nos estamos viendo en otra entrada!. FasteN

      Eliminar
    5. Igual y revisa en otros navegadores porque quizá sea un navegador en específico con el que se ve así. Yo he entrado desde Safari nada más, desde ahí se ve todo bien.
      Otro abrazo para ti.

      Eliminar
    6. Gracias Potro, si eso hare. Gracias gracias y mas gracias jaja :) . FasteN

      Eliminar
  8. Buenísimo tu diseño responsivo... enséñanos a optimizar los anuncios de esa forma :)
    saludos.

    ResponderEliminar
    Respuestas
    1. Gracias Jhon Jason, ¿a cuáles anuncios te refieres?

      Eliminar
  9. Esta Genial Potro;;:;;::: Pero La Vez Anterior Te Pregunte Como Cambiarle El Fondo O Colocarle, En El Lugar Que Va El Gadget? En Todos El Mismo Color ? Y la Otra Es Como Ago Que La Header O Portada Se Expanda Totalmente Que Quede Alineada A Los Lados? Gracias :D

    ResponderEliminar
    Respuestas
    1. No hace falta duplicar las preguntas, la primera te la respondí ayer en la otra entrada ;)
      Lo otro depende. El que la cabecera cubra todo el ancho de la pantalla no es algo que se pueda hacer en todas las plantillas, depende de la estructura de la misma. Lo que muchos hacemos es poner una imagen de fondo en el blog que simule que es parte de la cabecera, así da la apariencia de que abarca todo el ancho.

      Eliminar
  10. Buenísimo!
    Me vino perfecto para el archivo del blog que era muy largo.
    Siempre compartiendo lo mejor!

    ResponderEliminar
  11. Buenos días Potro, es interesante, pero a mi me da yu-yu, tocar la plantilla, no domino el tema y temo empeorarlo, y ahora que parece ir bien, prefiero no tocar nada.
    Feliz día.
    Saludos

    ResponderEliminar
    Respuestas
    1. Siempre podrás aventurarte en un blog de pruebas, así si algo sale mal nadie sale lastimado :)
      Un beso.

      Eliminar
    2. Pues tienes razón Potro, de hecho tengo uno para mi solo y ahí guardo cosas e investigo...buena idea.
      Gracias y feliz jornada

      Eliminar
  12. Hola Potro. Hay algun plugin para incorporar al blog que sea como un diccionario propio de los terminos usados en el blog y sus definiciones?

    ResponderEliminar
    Respuestas
    1. Hola Hector, ¿me puedes dar un ejemplo más concreto de lo que mencionas?

      Eliminar
    2. A ver: por ejemplo que la definición de una palabra aparezca en una nueva ventana como parte del blog sin ser una ventana pop up y que esa ventana sea como un diccionario interno del blog ordenandose alfabéticamente . De locos no?

      Eliminar
    3. No sé si haga falta un plugin, pero me parece que puedes crear una página en tu blog, y ahí escribir tus palabras con sus definiciones, y ya luego cuando en una entrada pongas una palabra del diccionario la enlaces a la página, y si quieres que el enlace vaya directo a la palabra en cuestión puedes usar parte de este método:
      http://ciudadblogger.com/2009/06/como-crear-vinculos-dentro-de-la-misma.html

      Eliminar
  13. Hola, como estas? Genial como siempre, lo puse en el Archivo del Blog, le hice una pequeña mejora, le tuve que quitar las flechitas de los lados por salian arriba del titulo del gadgets y no se veia del todo bn, si tienes alguna sugerencia para repararlo y que salga al lado del titulo seria genial.
    Otra cosita sabes si un album de fotos (http://3.bp.blogspot.com/-Fdb26VCFJc4/U2lOGZUPknI/AAAAAAAADuw/6-_EllRalhU/s1600/Sin+t%C3%ADtulo.png) y uno de videos (http://3.bp.blogspot.com/-2MDR7uVzfAU/U2lNzEcDnAI/AAAAAAAADug/Iac8jyf4_jI/s1600/Sin+t%C3%ADtulo2.png) asi kmo eso para blogger, el de video es para poner varios videos de varios hosting y el de las imagenes para que las entradas donde publico imagenes no sean tan largas, ya que publico como 17 imagenes, si me podrias ayudar seria Genial.

    Saludos!

    ResponderEliminar
  14. Sorry, creo que me equivoque, el de los videos es esta imagen (http://3.bp.blogspot.com/-2MDR7uVzfAU/U2lNzEcDnAI/AAAAAAAADug/Iac8jyf4_jI/s1600/Sin+t%C3%ADtulo2.png) y el del album de foto es esta (http://3.bp.blogspot.com/-Fdb26VCFJc4/U2lOGZUPknI/AAAAAAAADuw/6-_EllRalhU/s1600/Sin+t%C3%ADtulo.png) no estoy seguro si eran las imagenes correctas, sorry D:

    ResponderEliminar
    Respuestas
    1. Para el de los videos te puede servir el que uso en la sidebar, en el comentario #1.2 dejé en enlace del que uso, o bien, puedes probar con el del #1.1

      Para el otro mira en la categoría "Slideshow", quizá haya alguno que pueda servirte.
      Saludos.

      Eliminar
    2. Ok, no se me habia ocurrido utilizar eso que me dijistes la otra vez, Genial!! definitivamente eres el mejor. Lo he estado buscando por siglo xD vere si me funciona para eso y te aviso, aunque cuando lo puse en mi blog no sabia en donde poner los codigos del gadgets que quiera poner en cada pestaña, si me pudieras aclarar eso seria genial. Y vere a ver si un carrusel de los que tienes en la Seccion "Slideshow" me pueda funcionar para eso xD

      Eliminar
    3. En el caso del tabview que aquí se publicó sólo ve a Diseño (después de haber puesto todos los códigos) y verás unas nuevas secciones para añadir gadgets, ahí le das añadir y agregas el gadget que quieras ;)
      Saludos.

      Eliminar
    4. Hola, no se si me has entendido del todo bien, esto es lo que quiero lograr hacer (goo.gl/i55MSq) en la seccion que hay hay que dice OPCION 1 OPCION 2 OPCION 3 etc, y en cada seccion hay un video, pero lo hice con los dos que me mandastes (el de compartidisimo y el tuyo) y solo me sale un video nada mas, si me podrias ayudar seria genial y disculpame ke te moleste tanto xD

      Ps: si hicieras un tuto de eso pero actualizado (el de compartidisimo) seria genial xD gracias de antemano

      Eliminar
    5. Con el método de Karla no he probado ponerlo en una entrada, tendrías que consultarle a ella ese dato. Con el que se publicó aquí verás que en la entrada dice dónde poner los elementos (en este caso videos) dentro de cada sección, incluso cuando se quiera poner en una entrada.

      Eliminar
    6. Hola de nuevo yo por aca :D. Esta vez es para decirte que pude encontrar un Slider exactamente el mismo Slider que sale en la foto que te mande en los comentarios de arriba, este es el Slider (http://goo.gl/tQZbPa). Pero no se como instalarlo en mi blog, si me podrias ayudar pasito a pasito a instalarlo seria como siempre de gran ayuda de tu parte :).

      Saludos !

      Eliminar
    7. Te lo debo Laudy, nunca lo he usado así que no sabría decirte los pasos para su instalación :(

      Eliminar
  15. Hola Potro, veo que Ciudad Blogger esta con dominio sin www, ¿podrías hacer un tutorial actualizado para hacer esto mismo?, ya que con el método tradicional no se puede omitir el www, saludos!!

    ResponderEliminar
    Respuestas
    1. En efecto no se puede Ignacio. Sucede que cuando configuré el dominio del blog había una falla en el sistema de Blogger que permitía dejar la URL sin las WWW con un pequeño truquillo:
      http://ciudadblogger.com/2009/05/solucion-naked-domains.html

      Pero, tiempo después arreglaron esa falla y se volvió imposible volver hacerlo. No sé si actualmente haya otra forma de hacerlo, hasta donde sé no.

      Eliminar
    2. Ya veo, igual intenté hacerlo ahora y como dijiste ya no anda jaja, un abrazo y gracias por volver :]

      Eliminar
    3. Seguiremos buscando entonces, a mí me interesa poner el blog de Respondones sin las WWW pero no he podido. Si llego a descubrir cómo hacerlo se los comparto ;)
      Otro abrazo para ti.

      Eliminar
  16. Me salvaste la vida genio, jaja, hace meses venia pensando como hacer para que la sección "Directorios" no me ocupe tanto espacio y pensaba algo como esto pero no sabia como hacerlo. Mil gracias, sos el maestro de los blogger campeón.
    PD: Me quedo espectacular esta utilidad en mi blog: http://emoticones2012.blogspot.com
    Otra ves, mil gracias. (/^▽^)/

    ResponderEliminar
    Respuestas
    1. Gracias César, qué gusto que te haya sido útil. Un abrazo.

      Eliminar
  17. Hi, very interesting post thanks for sharing. Would you please consider adding a link to my website on your page ? Please email me back. Thanks!

    Randy
    randydavis387 at gmail.com

    ResponderEliminar
    Respuestas
    1. Hi Randy. We do not participate in any backlink program, but I appreciate your interest.
      Regards.

      Eliminar
  18. Hola Potro, soy un asiduo seguidor tuyo, te sigo hace desde hace mucho. Esta es la primera vez que me animo a comentar. Mi pregunta no es referida al tema. Pero quiero saber como colocar gadgets flotantes, osea hacer que un gadget se sobreponga sobre otro. Gracias por tu respuesta Potro, y GRACIAS (a ti) por estar en la red.... Este es mi sitio www.tarata21.com ...

    ResponderEliminar
    Respuestas
    1. Hola Dr. Azul, qué bueno que te has animado a comentar :)
      No sé exactamente cómo deseas el gadget, pero "flotante" puede hacer de manera que cierto gadget quede fijo y que no se mueva aun cuando se suba o baje por la página, así como las flechas que tengo en el blog, que se quedan en el mismo lugar.
      Si a eso te refieres entonces sólo basta con que conozcas el ID del gadget, y luego en los estilos de tu plantilla agregues esto:

      #ID {
      position: fixed;
      bottom: 10px;
      right: 10px;
      }

      Donde #ID es el ID del gadget; bottom la distancia desde abajo; y right la distancia desde la derecha.

      Eliminar
    2. Gracias por tu pronta respuesta potro. Me explicare mejor, en mi sitio www.tarata21.com, tengo unos botones sociales en la parte superior derecha, sobre el encabezado de la web. Esos botones están encima del encabezado. Los coloque allí usando la alineación. Pero, en el espacio original donde los inserte, queda un espacio vacío. Si vez mi web, debajo del código QR, hay un espacio blanco, eso es debido, a que los botones ocupan ese espacio, solo que los he movido arriba con la alineación. Lo que quiero, es poder mover esos botones o cualquier otro gadget a voluntad, sin que me queden espacios en blanco. Gracias por tu respuesta Potro, eres lo máximo en la red...

      Eliminar
    3. No creo que esa sea la mejor forma de hacerlo, en todo caso es mejor que ubiques los gadgets donde quieras que estén realmente, por ejemplo, el de Estadísticas ponerlo en primer lugar de la sidebar. En el caso del de la cabecera lo ideal sería dividir la cabecera para que ahí tengas espacio para poner gadgets.
      El espacio que dejan los gadgets no se puede eliminar porque ese es el espacio real que ocupa el gadget. Quizá una forma poco correcta, pero útil, es que a la sidebar de abajo le apliques un margen superior negativo para que se suba y ocupe el espacio vacío:

      #sidebar-right-3 {
      margin-top: -130px;
      }

      Eliminar
  19. Gracias por tu paciencia y respuestas Potro, sigue adelante... Eres Genial...

    ResponderEliminar
  20. Buenos dias Potro, tengo una nueva consulta, este efecto de expandir y contraer gadgets también es aplicable al gadget popularposts es que me gustaría aplicarlo. Saludos y gracias de antemano por tu tiempo y dedicación.

    ResponderEliminar
    Respuestas
    1. Hola Veronica, debe poder aplicarse a cualquier gadget, sólo es cuestión de localizar las áreas que se indican. Saludos!

      Eliminar
  21. Buenas tarde Potro, de tanto trastear al final conseguí que me funcionara. El script lo he puesto antes del cierre de body me funciona perfecto. Muchisimas gracias por estos valiosos tutoriales que tanto nos ayudan a los profanos en el tema. Un abrazo y me voy a pasar por tu ultima entrada que me parece que la voy a necesitar ;)

    ResponderEliminar
    Respuestas
    1. Me alegro que hayas conseguido hacerlo. Gracias a ti por tu visita ;)

      Eliminar
  22. Hola Potro !!!
    Mira al final lo he hecho de esta forma y me ha funcionado. De la otra forma no había manera. Una última pregunta, como hago para que las flechas me queden a la izquierda. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, de hecho deben estar a la izquierda, si las quieres a la derecha cambia esta parte: &#9660;&#9650;
      y ponlas después de <data:title/>

      Eliminar
    2. Gracias Potro !!!
      Te quiero preguntar también si este efecto deslizante se le puede añadir a los comentarios.
      Gracias y disculpa las molestias.
      Saludos !!!!

      Eliminar
    3. En los comentarios individuales no lo sé, en todo el contenedor sí pero... siempre es un problema con los comentarios anidados (los que tienen la opción de Responder) ya que sólo se expande el contenedor cuando no hay comentarios, pero deja de funcionar cuando sí hay comentarios :(

      Eliminar
  23. Lastima :( Gracias por responder. Saludos !!!

    ResponderEliminar
  24. Hola muy buen post queria saber , si pudiera usar esto para ocultar parte de un post como pusiste tu un ejemplo con Prototype y Scriptaculous http://ciudadblogger.com/2009/10/expandir-y-contraer-partes-de-una.html
    solo que lamentablemente en la plantilla que uso www.sheepbuster.com, hay un efecto jquery que interfiere con el prototype lei esto y pense que pusiera ser una alternativa para mi , en todo caso como seria el codigo para hacer lo que indico , muchas gracais de antemano , por existir y por hacernos lavida un poco mas sencilla Dios te bendiga

    ResponderEliminar
  25. hola que tal no se si te llego mi pregunta

    ResponderEliminar
    Respuestas
    1. Hola Mike, sí puedes hacer lo mismo que con Scriptaculous pero con jQuery, sólo aplica el spoiler con jQuery que se explica en esta entrada:
      http://ciudadblogger.com/2014/05/4-maneras-de-poner-un-spoiler-en-el-blog.html

      Saludos y gracias por tu comentario.

      Eliminar
  26. Hola. Tengo una duda con este tutorial.
    Resulta que no puedo poner más de un gadget de esta forma (es decir, que pueda expandirse y contraerse). Tengo uno ya puesto, y cuando intento añadir otro, se me expanden los dos a la vez y luego se contraen al momento. Como estaban uno debajo del otro, cambié la disposición, pero no funciona.

    Gracias de antemano, y perdona por las molestias.

    ResponderEliminar
    Respuestas
    1. Hola, recuerda que siempre que quieras añadir más deberás cambiar lo que está en color azul.

      Eliminar
    2. Ala, pero qué tonto. Jaja, perdona por hacerte responder a esto. Muchas gracias.

      Eliminar
  27. Hola Potro !!!
    De nuevo vuelvo con este script. Mira he borrado sin querer algo en el blog y no había manera de arreglarlo, así que tuve que diseñar de nuevo toda la plantilla, vamos tuve que diseñar una nueva desde 0. He instalado este sistema de expandir y contraer los gadgets en el gadget Archivo del blog y Entradas Populares. En el gadget Entradas Populares funciona perfectamente y en el gadget Archivo no, se expande y se contrae enseguida. Si quieres entra en mi blog y lo veras. ¿Porque será que me pasa esto? Y hay forma de solucionarlo? Gracias !!!!

    ResponderEliminar
    Respuestas
    1. Hola, parece que hay otro gadget al que le pusiste la misma clase que el gadget de Archivo (expandir1), es el gadget HTML1, parece que tienes una imagen de una flecha en él. Todos deben tener diferente ID y diferente clase.

      Eliminar
  28. Solucionado !!!! Muchas gracias !!!! Si, era esto lo que pasaba, ni me había dado cuenta de tal fallo.
    Te tengo que preguntar una cosita más y prometo no molestarte hasta por lo menos dentro de unos meses, ya que acabo con los retoques en el blog. Mi pregunta: ¿Se puede eliminar en las paginas estaticas o en una concreto el espacio lateral que está entre la página y los bordes del blog. No quiero que haya espacio en blanco en los laterales, ¿no se si me has entendido ? Gracias !!!!
    Saludos

    ResponderEliminar
    Respuestas
    1. Nunca es molestia, así que puedes preguntar todo lo que quieras ;)
      Ese espacio no se puede eliminar porque es el espacio entre el blog y la ventana de tu navegador, de manera que si reduces el ancho de la ventana también se reduce ese espacio, y si la agrandas éste se amplía.
      Saludos.

      Eliminar
  29. Hola, tengo una preguntilla, si quiero hacer esto en un mismo gadget, es decir, en un gadget html hacer un menú con unos enlaces que al hacer click muestren su contenido, ¿cómo se haría?

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola María, usa spoilers:
      http://ciudadblogger.com/2014/05/4-maneras-de-poner-un-spoiler-en-el-blog.html

      Eliminar
  30. Hola Potro!! llevo buscando esto muchísimo tiempo... pero no doy con la tecla para hacer que funcione en el gadget de archivo, ya que el código no es el mismo...
    Espero tu ayuda!!

    ResponderEliminar
    Respuestas
    1. Hola, ciertamente el gadget de Archivo no es como el del ejemplo, pero en la entrada verás qué códigos buscar para que sepas cómo guiarte y ponerlos en el lugar adecuado ;)

      Eliminar
  31. ¡Hola! Yo tengo una lista enorme de cosas en una página del blog y había pensado reducirla usando esto. Pero al ser una página del blog y no un gadget, no es igual, ¿qué me recomiendas?
    Gracias :)

    ResponderEliminar
    Respuestas
    1. Hola Edith, en ese caso puedes usar un spoiler:
      http://www.ciudadblogger.com/2014/05/4-maneras-de-poner-un-spoiler-en-el-blog.html

      Eliminar
  32. Instalarlo me sale perfecto, pero tengo un problema, y es que cuando estoy dentro de una entrada no logro que se despliegue el gadget.

    ResponderEliminar
    Respuestas
    1. ¿Me puedes mostrar un ejemplo de una entrada con la que tengas el problema?

      Eliminar
  33. Gracias Potro por este tutorial, me ha servido bastante, ahora mi blog se ve bastante descente jeje. muchas gracias (=.

    ResponderEliminar

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