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.

Rosa

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 ;)

VuestraRadio

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

VuestraRadio

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

Emilio Goicoechea

¡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

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

Abadesa

Genial como siempre ;) Gracias Rosa.

Fero

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

Rosa

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!

Rosa

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

Fero

Gracias Rosa!

Ali C.

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!

Ali C.

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

veinteañera

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

veinteañera

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 :)

Beto Pelotas

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

te invito a ver el resultado
Ubuntuxi

Emilio Goicoechea

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!

Anny~en~Ciel

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.

Rosa

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/

Rosa

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

Rosa

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 :(

Rosa

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.

Rosa

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 ;)

Anny~en~Ciel

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

Rosa

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

Nav!´s

Muchas Gracias Rosa, ha quedado de maravilla :P

Emilio Goicoechea

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

Rosa

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

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

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

Σ=o) Pau

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 ^_^

Rosa

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

Rosa

Σ=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?

mimo

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

Σ=o) Pau

:$ 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 ^_^

Σ=o) Pau

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

R.est

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

Rosa

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

Manfenix

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

Rosa

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

Manfenix

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?

Rosa

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

Dragon negro

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

Rosa

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

ALvaRiTo

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

Rosa

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

admin

muy muy bueno Gracias ;)

Cristian

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?

Rosa

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

lk

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

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

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

que hago

me fascina tu web

Rosa

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.

Sergio

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

Rosa

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

Sergio

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

Rosa

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

Sergio

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

Rosa es increible gracias

YoQueSe

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

:D

Balthazar!

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

Rosa

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

Rosa

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

Don Choky

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

Hola :D

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

Franko

No me funciono !!!!

Franko

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

Rosa

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

Rosa

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 en la entrada

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