84

Expandir y contraer cualquier gadget

Expandir/contraer

Habíamos visto antes como expandir y contraer el gadget de "Etiquetas" usando un sencillo script y poco después también vimos como hacerlo con los gadgets de "Archivos" y "Feed".




Me ha llegado un email de Woody Jagger donde me pregunta como hacer esto mismo con cualquier otro gadget (Perfil, Archivos, Lista de Blogs, etc.), así que vamos a ver como aplicar el efecto de "expandir y contraer" a cualquier otro gadget de los que incluimos normalmente en la sidebar.

Una vez que incluimos uno de estos gadget, en la parte de "Edición HTML" de nuestro panel y expandiendo las plantillas de artilugios, podemos ver que la estructura de cualquiera de los gadgets añadidos es muy similar, en algunos casos idéntica  o  parecida a esta:

<b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'>
<b:includable id='main'>
<!-- 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'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
Para aplicar este script en cualquiera de estos gadget, solo tendremos que fijarnos bien en que parte hemos de añadir las piezas de código que componen el script y que, en todos los casos, es el mismo código (el resaltado en negrita):
<b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'>
<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>[+/-]
<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>
Expandir/contraer

Si queremos sustituir el símbolo de expandir y contraer [+/-] por una imagen, colocamos directamente en su lugar el código para mostrar la imagen:
<img src="url_de_la_imagen"/>
Expandir/contraer/img

Ver ejemplo funcionando

Entradas Relacionadas:

84 comentarios:


Bonzu Pipinpadaloxicopolis III

Algo más cómodo sería que el título del gadget sea el anlace a mostrar, eliminamos <data:title/> y ponemos el código:

Y en [+/-] cambiarlo por <data:title/>.
También creo que se opte por un javascript:void(0) en vez de un #.
Un ejemplo en el Archivo del blog de mi blog.

Anónimo

Bonzu Y aún hay mejores opciones que la tuya, sin duda, pero resulta que a Woody le interesaba esta...
Si estás a gusto con la que usas me alegro por ti ;)

Alma

A mi me gusta muchisimo mas que el enlace solo este en el simbolito de esxpandir y contraer :)

Alma

Ya está je,je, facilisimo y queda de miedo lo he puesto hasta en el de seguidores que solo tengo dos pero bueno :D gracias wapi :P

Anónimo

¡Hola Rosa!
Quería saber si existe algún modo de editar y probar la plantilla del blog en forma offline. Sería un alegrón si esa cosa existe.

Gracias.

Pilar Arguiñáriz Lusarreta - Palel

genial, otro más contraído: los blogs que sigo.
Hasta ahora tenía que mostrase sólo 5 pero me gusta mucho más todo contraído y que cada cual expanda lo que quiera :-)
Gracias. Hacía días que no "toquiteaba" la plantilla
Cosas de Palel

Muma on the Moon

Genial como siempre ;) Gracias Rosa.

Anónimo

Hola Rosa.

Se ve sencillamente maravilloso las entradas con ese efecto.
Te comento que quisiera poner de lujo un nuevo blog que empiezo, pienso usar la plantilla mínima y editar a partir de allí. Mi pregunta es: ¿Como hago para quitar la "barra de navegación" de blogger de la parte de arriba del blog? La que trae por defecto, que dice "buscar blog, marcar blog", etc.

Muy agradecido.

feromenoi.blogspot.com

Anónimo

Emilio Goicoechea Puedes usar un blog de pruebas idéntico al "real" y después pasar a el los resultados, o puedes editar en el real y cerrar al publico el blog mientras lo haces, si te refieres a eso...

Antony

Muy interesante. No tenia esto muy claro. Pero me va a servir de mucho. Saludos!

Anónimo

Fero Me encanta oír eso...estoy un poco harta de que todo el mundo menosprecie los diseños personalizados y use plantillas standar y "maravillosas" adaptadas, que en la gran mayoría funcionan fatal ;)

¡Verás como te quedará genial y será tu propio diseño el que uses!

Mira en esta entrada para lo de la Navbar:
http://elescaparatederosa.blogspot.com/2007/01/ocultar-que-no-quitar-la-barra-de.html

Anónimo

Gracias Rosa!

Bubble

Hola Rosa! Yo lo único que quisiera saber es si hay más colores en la barra de herramientas a la hora de escribir una entrada. O son solo esos?
Besos!

Bubble

Hay más colores para usar en los textos cuando escribimos las entradas?

Anónimo

Bien!!! llevaba tiempo intentando aplicar el truco al módulo de seguidores, pero una que no entiendo mucho de códigos y la cuesta... y no conseguí mucho :(
Menos mal que estás inventada Rosa.
Yo lo voy a aplicar al coso de seguidores, que así escondidito en el blog no queda feo ^^

Un beso

Anónimo

Por cierto Rosa, claro que sí! como bien dices por ahí arriba, nada que vista mejor nuestro blog que una plantilla "artesana" creada por nosotros mismos. Un fiel reflejo de cada uno y nuestra "imagen" en el mundo bloguero.

Vivan las plantillas artesanas, mucho mejor que las pre-descargadas (como en la cocina mejor lo casero que lo precocinado)

Yo lo tengo claro, mi mínima retocada a parches no la cambio yo por nada del mundo!

Alba

Gracias Rosa , siempre innovando , saludos :)

Albert Wayne

rosa eres enormeeeeee eso es lo que precisamente estaba buscando te agradezco la ayuda ofrecida gracias

te invito a ver el resultado
Ubuntuxi

Anónimo

Hola Rosa y gracias por contestar.

En cierta forma me refería a eso. Resulta que tengo una notebook que no todo el tiempo está conectada a internet y utilizo mucho un addons de Firefox llamado ScrapBook para bajar páginas y luego navegarlas cuando no estoy conectado. Está demás decir que tengo una carpeta para El Escaparate. Pero cuando no estoy conectado necesitaría un entorno que simule el de Blogger para ir ensayando y aprendiendo sobre la plantilla. Sería bárbaro si algo así existiera para hacer de cierto tiempo ocioso algo más productivo. Por eso preguntaba si tenías noticia de algo por el estilo.
¡Suerte!

Unknown
Este comentario ha sido eliminado por el autor.
AnnyCiel

Hola Rosa!

Tengo un problema!!
Mi blog con Mozilla Firefox, que es mi navegador principal, hace como una semana empezo a deformarse, lo hace ver mas grande y queda horrible!
En cambio cuando habro mi pagina con Win Internet Explorer, lo carga lo mas bien sin deformaciones de ningun tipo!
Intente cambiarle la plantilla pero sigue haciendome lo mismo.

Que puedo hacer??
Odio usar el navegador de Windows, y dicen que Mozilla es el mejor navegador para Blogs de Blogger no se porque me lo deforma asi, antes no me lo hacia!

Desde ya muchas, muchas gracias Rosa!
Espero que me puedas ayudar!
Y perdon por comentar esto en un post equivocado.

Anónimo

Ali C. Solo esos, aunque no recuerdo ahora mismo si en el editor de Blogger in Draft hay alguno más...mira a ver http://draft.blogger.com/

Anónimo

veinteañera ¡Haces muy bien! Porque es tuya, es única, demuestra tu trabajo y tu aprendizaje, está como a ti te gusta y además...¡está preciosa porque lo digo yo! ;) :D

Anónimo

Emilio Goicoechea Que torpe...entendí que querías hacer cambios sin que quedasen reflejados en el blog para las visitas...
No conozco algo como lo que dices, lo siento :(

Anónimo

CLUB D'ESCACS DIAGONAL MAR Ve a la Configuración de tu panel y comprueba que en la pestaña "Feed del sitio" tengas puesto "Completo" ...otra cosa no se me ocurre, ya que la fecha no tiene nada que ver con el feed.

Anónimo

Anny Si hablas del blog de tu perfil (My~Seventh~Ciel) yo lo veo perfecto e igual con Firefox y con IE así que seguro que es algo de la configuración de tu navegador...borra la caché y las cookies a ver si con eso se soluciona. Pero tranquila, porque el resto del mundo lo ve bien ;)

Unknown
Este comentario ha sido eliminado por el autor.
AnnyCiel

Borre el cache y las cookies, pero aun asi no volvio a la normalidad mi blog. Pero si tu dices que el resto lo ve bien, entonces no me preocupo tanto!!

Gracias Rosa por tu ayuda!!

Anónimo

Anny Yo lo veo igual en ambos, así que supongo que los demás también...no se, mira en Herramientas del navegador a ver...el tamaño de texto o la configuración...

Anónimo

Muchas Gracias Rosa, ha quedado de maravilla :P

Anónimo

Bueno, no importa. Voy a crear un blog de prueba y estoy pensando en otro para asuntos personales. Y pensándolo bien creo que voy a patentar la idea, jejejeje.
¡Suerte!

Jessica

Hola Rosa. Una pregunta:

¿Cómo puedo crear esto de expander/contraer, pero al mismo tiempo usando el efecto "slide" con "Scriptaculous"?

Deseria poder colocar mis sidebars con el miso efecto deslizante que tiene la flechita en tu blog de "ir arriba". Me podrias explicar o decirme algun post donde pueda entenderlo?

Gracias mil!

Jaime Trujillo Escobedo

Genial Rosa!! la verdad es que es un truco muy bueno! :-) me gusta como has cambiado el Escaparate :-D un abrazo0te! ;)

Anónimo

Jaime ¿Te llegó mi email de respuesta por lo de las columnas?

Jaime Trujillo Escobedo

Si me llegó :) muchas gracias Rosa ;) aver si puedo solucionarlo, la verdad es que es incómodo que se me desarme la plantilla :S

Pilar Arguiñáriz Lusarreta - Palel

siguiendo con esto, he querido aplicarlo a los seguidores (que tengo "sólo" uno menos que "VuestraRadio" = 1 :-)) y no lo consigo.
El código es muy distinto a otros gadgets y veo dónde poner lo primero y lo tercero (negrita) pero con lo segundo tengo dudas. Lo he colocado en diferentes sitios y -al menos en Vista Previa- no funciona.
Como siempre, seguro que algo hago mal :-(

Rosa

Pilar Arguiñáriz No puedo ver el blog de "Vuestra Radio" pero dudo mucho que lo haya conseguido...ese gadget rechaza todos los códigos que le coloques...si guardas los cambios y luego vas a editarlo lo verás...el código añadido desaparece...se muestra desde Google Friends por eso su estructura es diferente.

Pilar Arguiñáriz Lusarreta - Palel

ufff, gracias por la aclaración, Rosa. Ya no sabía dónde más colocar los códigos :-)
Comentarte desde éste que funciona perfecto -por aquí- el código añadido en tu blog para marcar los enlaces visitados.

ice

Hola, tienes un blog muy interesante, enhorabuena.

Sería posible utilizar la opción de expandir/contraer pero que en lugar de los widgets afecte a las entradas del blog?

Osea, si en mi blog creo una entrada que esté la opción de minimizarse de forma que se pueda ir bajando comodamente a cada una de las anteriores sin tener que recorrer todo el texto de cada entrada, no sé si me explico?

Osea que quedase algo parecido a lo que sería el historico de archivos o entradas que tenemos, pero directamente en cada entrada o publicación.

salu2

Unknown

Algo estoy haciendo mal porque no se me comprime la lista de blog o no si influye que haya otro script se ve el [+/-] pero me funciona como un ir arriba :(

besos ronroneados ^_^

Anónimo

ice Puedes usar las entradas expandibles que yo misma uso en las páginas de etiquetas:
http://elescaparatederosa.blogspot.com/2007/04/ttulos-expandibles-en-los-post-de-las.html

e incluso usarlo en la pagina principal:
http://elescaparatederosa.blogspot.com/2008/10/entradas-expandibles-en-la-pgina.html

Anónimo

Σ=o) Pau No importa los que haya...ya ves en mi blog de pruebas que uso varios. Y que funcione como un "ir arriba" es muy raro, porque aunque lleva el # está dentro del gadget...tienes que haber omitido una parte del código me da esa impresión...¿al final del gadget has puesto las dos "porciones" que hay que poner?

Anónimo

Gracias Rosa, eres genial explicando...
Saludos y abrazos
Mimo

Unknown

:$ acusome de no poner las dos porciones finales, uf! se nota que toy cansada antes no me hubiera pasado :O gracias lo probaré de nuevo :D

besotes y que tengas un lindo fin de semana ^_^

Unknown

siiiiiiiii funcionó!!!!! prrrrrrrrrr gracias de nuevo ^_^ besotes!!!! y un
((((((( ^_^ ))))))) (abrazo ronroneado jejeje)

Esteban Rico

Yo lo hize y le puse una imagen pero la imagen sale mas arriba del titulo :o y se ve raro xD, y creia que por tener scriptaculous se iva a deslizar xD pero no u.u

Anónimo

R.est No, este no se desliza...el "deslizante" lo publicaré en breve, ya tengo la entrada preparada :D

Manuel Alberto

Hola Rosa y saludos desde esta parte del mundo !!!.
Estoy de vuelta en busca de tu ayuda. Tengo dos consultas. Va la primera. Es posible ocultar a la vista de los visitantes un gadget?. Y la segunda, quiero centrar un bloque de anuncios de google que se encuentra debajo de la primera entrada. He buscado en la plantilla el código correspondiente sin exito. Dónde se encuentra y si es posible alinear el bendito bloque?.
Un fuerte abrazo y gracias.
Avibert

Anónimo

Manfenix Para centrar el adsense mira si te sirve colocando el código del anuncio entre:
<div style="text-align:center;"> y </div>

Para lo del gadget mira si te sirve esto:

http://elescaparatederosa.blogspot.com/2008/09/acceso-al-panel-de-blogger-desde-el.html

Manuel Alberto

Gracias Rosa, saludos y un fuerte abrazo.

Isaac

Hola Rosa, genial como siempre tu aporte.
Solamente me ocurrió un problemita con el gadget de últimos comentarios, me aparece el signo +/- pero aparece siempre expandido.
¿por qué puede ser?

Anónimo

Isaac Revisa el código en el gadget de últimos comentarios y en el que está debajo de ese también...fijate que son dos gadget independientes y te has liado y en el segundo falta el [+/-] del título y su código correspondiente...revisalos con calma los dos. Me parece que te has liado y has confundido el código de uno con el otro...

Dorian Hawkmoon

Quiero compartir una cosa a raiz del comentario de Ali C. en el comentario 14 (allá a lo lejos...) en el que preguntaba si podía escoger otros colores además de los que ofrece blogger cuando escribía una entrada y mi respuesta es que si.

Prueba a escribir una palabra sencilla o más y cambiar de color en redactar. Cuando pases a escribirlo en edición de HTML, verás algo parecido a esto:
span style="color: rgb(255, 255, 0);">hola/span>

(y digo parecido porque en el comentario no me dejan ponerlo tal cual)

Para cambiar los colores, tienes que cambiar los valores de dentro del parentesis de rgb. para ello, usa el paint y al definir colores personalizados (dando doble click en algún color) verás que pone rojo, verde y azul con unos valores (Red, Green, Blue---> rgb) escoge el color que quieras y copia los valores que te salgan.

Espero que os sea útil :D

El h@Cker De la vel@

hola rosa me e vuelto un poco molestoso pero me gustaria saber como colocar una entrda principal en mi blog cuando lo abran abra con esa osea me explico mi blogs tiene de todo un poco pero a medida q voy publicando las demas se van juntando con las otras eje: publico un disco de mana verdad y despues una pelicula y despues un programa o cualquier otra cosa entonces todas ella van a salir juntas al abrir mi blog y verlo pues quiero que me salgan unas entradas en especifico como por eje: todas mi peliculas en estrenos sera que se puede no se

Anónimo

El h@Cker De la vel@ Todas las entradas salen juntas según se van publicando... pero si cuando las publicas les pones etiquetas, luego puedes ver solo las entradas de esa etiqueta al pinchar en ella...

Unknown

holass. porfa rosa sabes como poner 2 gadgets en la sidebar? mi plantilla tiene una de 320px, y yo quiero poner 2 gadgets paralelo abajo del de 320px ,,

Anónimo

ALvaRiTo Te refieres a dos nuevas columnas, no dos gadgets... no lo tengo publicado aún y no se cuando será, pero lo haré.

webs

muy muy bueno Gracias ;)

Prof. Cristian E. Moyano

Y si yo quiero expandir y contraer los posts (conservando el título del post) con una imagen colocada en el mismo lugar que tenés la cantidad de comentarios (a la derecha del título del post), cómo sería?

Anónimo

Cristian No se como sería...yo explico como contraer gadget en esta entrada y para mostrar solo los títulos pues hay algo así aquí:
http://elescaparatederosa.blogspot.com/2008/10/entradas-expandibles-en-la-pgina.html

Si eso no te sirve, pues lo siento, voy publicando lo que mejor me parece para todos, para cada persona no puedo ir armando efectos o me volvería loca...

Anónimo

hola rosa. he conseguid que me funcionase este script en http://paraninosconacebza.blogspot.com. Ahora quiero que lo veas, me gustaría cambiar la llave [+/-] por una FLECHITA situada JUSTO DEBAJO DEL TÍTULO y centrado (DIRECTORIOS). ¿cómo lo puedo hacer? gracias!!

Anabel Cornago

Hola,
he intentado aplicarlo en la lista de blogs, pero no he podido: me falta "data:content".
Mil gracias de todas formas por explicarlo tan bien.

Alex González

Hola este truco solo sirve en HTML y texto Pero en lista de blogs No sirve

que hago

me fascina tu web

Anónimo

Alex Que tu no hayas logrado hacerlo, no significa que puedas decir "este truco no sirve"...al final de la entrada hay un enlace que dice "Ver ejemplo funcionando" y ahí verás un blog de pruebas donde está instalado el efecto en varios gadget incluida una Lista de blog...

Lo único que has de hacer es ir colocando el código en las partes del gadget correspondientes en la Lista de blog, nada más.

Anónimo

como alineo el ▼ con el título, peor que a mismo tiempo si se le pueda dar clic? es que ya pude acomodarlo peor no me funciona

Anónimo

Sergio Tal como lo explico queda igual que lo ves en mi sidebar... el hacer cambios ya es cosa de cada uno, yo no puedo andar explicando para todos los casos concretos que pidáis...

Anónimo

eso se oyó a q te molestó mi comentario, pero aun así gracias, creo q es mi navegador el q me hace q se vea mal, no se porque dices ''todos los casos concretos'' si apenas es como la segunda vez que comento aquí.

Aún así gracias

Anónimo

Sergio Lo digo en plural para que entiendas que no solo es por ti mi comentario... es lo que contesto a todos.
Imagina que tengo que pasarme el día colocando las flechas a la izda, viene otro que las quieres a la derecha y otro que quiere... cualquier cosa.
No podría ni dormir... yo doy las entradas con una explicación concreta, ya es cosa de cada uno el intentar hacer o conseguir otra cosa distinta...

Anónimo

yo ya se como se coloca izq., derecha, etc. pero lo q pasa es q no se si sea mi navegador el q hace que se vea muy pequeño y pegado al borde del nombre del gadget, pero tal vez sea un error mio.

Alex González

Rosa es increible gracias

YoQueSe

¡Qué bueno es tu blog! He seguido paso por paso y me ha salido genial, sin problemas.

:D

Hugo.V13

Hola Rosa! pues te comento que me ha servido mucho este truco y te lo agradezco, pero tengo un problemita al intentar colocarle un "overflow:auto" para que se cree la barra scroll y no quede taaaan largo hacia hacia abajo... lo he intentado en #Label1, #Label ul, y dentro del mismo gadget pero nada parece funcionar... tendrías alguna idea de como hacerlo jejejej... =P!

Ojala puedas ayudarme!

Saludos! ^^

Anónimo

Balthazar! Mira si esto te ayuda:
http://elescaparatederosa.blogspot.com/2007/10/scrollbars-en-cualquier-parte-del-blog.html

Mozz

Probé con el que explicaste tanto vos como Gema usando Scriptaculous pero me pasaba lo que a mucha gente (al hacer click la pagina se iba arriba de todo). Por mas que miré y busqué y saqué scripts que podian estar interfiriendo, jamas funcionó...

Pero DE ESTA FORMA funciona espectacular. MUCHAS GRACIAS!!!

Anónimo

MozzTe comento que una de las cosas que impide funcionar al otro sistema es la barra de Wiwiya o como se diga... es que la vi en tu blog...

Anónimo

Yo cambie el texto [+/-] por una imagen, pero me gustaria que cuando el gadget este contraido, se muestre una imagen (una flecha hacia abajo, por ejemplo) y cuando se expanda, se cambia por otra (una flecha hacia arriba).

Que tipo de condicion deberia usar, o como lo haria, si es que es posible?

Rosa

Don Choky Por ahí tengo una entrada que usa el sistema que dices con dos imágenes... trata de localizarla y quizás te sirva como referencia para añadirlo en este...no recuerdo ahora mismo la entrada exacta...

Anabel Cornago

Hola :D

Mil gracias de nuevo; por fin me salió. No ponía el código completo ;)

FrankoFull

No me funciono !!!!

FrankoFull

pero gracias.. A lo mejor yo lo hice mal :)

Anónimo

Franko Pues si, porque te aseguro que funciona, no tienes más que ver el ejemplo en el blog de pruebas.

Negrevernis

Hola, Rosa.

Llevo unos días intentando poner en marcha esta entrada del expandir y contraer gadgets y no me sale. Logro que aparezca el signo [+/-] al lado del título del gadget que elijo, pero a la hora de la verdad, no funciona y no se expande nada: es como si el gadget hubiera desaparecido, aunque en la plantilla HTML sí aparece.:(

Gracias :P

Anónimo

Negrevernis No puedo más que decirte lo que explico en la entrada... y que como ves en el blog de pruebas, funciona.

Negrevernis

Gracias, Rosa. Seguiré probando a ver... :S

Publicar un comentario

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

Los comentarios están siendo moderados.

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