Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Expandir y contraer el contenido de cualquier gadget

Esta es una sencilla forma de mostrar el contenido de los gadgets de forma recogida.

Puede ser de utilidad para los blogs que tengan largas listas de blogs amigos, muchas etiquetas o simplemente para los que deseen tener sus elementos de página recogidos.

Ayer me llegó un comentario de Marisol donde me pregunta como "esconder" su lista de blogs así que vamos a explicarlo...


Diseño>edición HTML>expandimos artilugios

Como comprobaremos, la estructura de cualquier gadget (en este caso usaremos el gadget de html-javascript) es similar o idéntica a esta:

<b:widget id='HTML1' locked='false' title='HTML' type='HTML'>
<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>

Ten en cuenta que cada gadget tendrá un nombre diferente en la parte de <b:widget id='HTML1' ya que puede ser <b:widget id='BlogList1' (la lista de blogs) por ejemplo. Por eso es importante que tengas un título en el gadget, para localizarlo antes.

Una vez localizado el elemento al que le aplicaremos el truco añade lo que te muestro en azul, fijándote bien en dónde añadir el script:

<b:widget id='HTML1' locked='false' title='HTML' type='HTML'>
<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>
<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>Abrir el contenido
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<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>

Ahora puedes cambiar Abrir el contenido por cualquier frase que quieras poner para que, al hacer clic en ella, se habra el contenido del gadget.

También puedes poner una imagen (o una imagen con texto) en lugar de una frase. En ese caso debes poner esta línea en lugar del texto:

<img src="URL DE TU IMAGEN"/>

Sustituye
URL DE TU IMAGEN por la dirección de tu icono o tu imagen. En el caso de poner también el texto, lo escribiríamos al final o al principio de la línea de la imagen.

J. Villegas Ruíz dice...

Hola! como me le va? felicitaciones por el balcón! tienes un fan más desde Venezuela ( ya te deje varios comentarios en otras entradas felicitandote por este gran blog jeje) pero esta entrada en particular no la entendi mucho... y me gustaría aplicarla a mi blog pero no se como. Saludos!

Jaime Trujillo Escobedo dice...

Hola Ville! muchas gracias por tus felicitaciones.

Verás, en el primer código muestro un gadget (elemento de página) de estilo html-javascript.

Simplemente tienes que agregarle lo que te muestro en azul (en el siguiente código) al gadget que desees tener con este efecto.

Debes tener en cuenta que tu gadget puede tener un nombre diferente, no tiene que ser HTML1 como en el ejemplo...

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

Si sigues con dudas dímelo. ^_^

¡Saludos!

Anabel dice...

Hola!!
Muchisimas gracias por tu tiempo. Nos viene de maravilla a las novatas :)

Jaime Trujillo Escobedo dice...

¡Hola Anabel! Gracias a ti por comentar. Estaré aquí para lo que necesites ;).

ELFARFULLI dice...

Hola Jaime, fantastico y maravilloso el blog.
Me gustaria hacerte dos preguntas.
La primera es que cuando aplico en mi blog el expandir y contrarer, cambia el color del fondo, lo tengo en blanco y cambia a gris.
Y la segunda es la siguiente, los post que publico suelen ser bastante extensos y aunque tengo configurado para que se muestren cinco entradas hay veces que solo aparecen dos o tres.
Esta es la direccion del blog, si quieres darle un vistazo http://elfarfulli.blogspot.com/, de todas las maneras muchas gracias por todo lo que nos enseñais.
Un saludo

Jaime Trujillo Escobedo dice...

Bienvenido, ELFARFULLI! ¿Te refieres al fondo de los gadgets, que cambia a gris en lugar de permanecer blanco?

Prueba a añadir antes de la etiqueta ]]></b:skin> este bloque:

#HTML1 .widget-content{background: #ffffff;}

Ten en cuenta que HTML1 es la ID (nombre) de un widget cualquiera pero tendrás que localizar la ID de tus gadgets con ayuda de su título (usa el buscador de tu navegador -presiona Ctrl y F-) ya que puede llamarse HTML2 o HTML3.

Guarda la plantilla y comprueba el resultado.

En cuanto a lo de los posts... no sabría muy bien que aconsejarte ya que es una plantilla modificada y no una de blogger, eso sin contar que tiene el truco de "posts resumidos" aplicado con un script distinto al que conozco.

¡Saludos y suerte!

ELFARFULLI dice...

Gracias por tu rápida respuesta Jaime, me pongo con tu sugerencia y ya te contare.
Un saludo y muchas gracias

Negrevernis dice...

Muchas gracias por este truco. Llevaba varios días intentándolo en blogs de prueba y no me salía. :D

El único sitio donde no he podido ponerlo es en una nube de etiquetas, pero imagino que es porque está modificada y no veía claro las líneas de códigos que señalas.

Un saludo.

Jaime Trujillo Escobedo dice...

Perfecto entonces, ELFARFULLI. Saludos!

Jaime Trujillo Escobedo dice...

Negrevernis, ¿Pero te funciona con otros gadgets? Debería hacerlo ya que el código es idéntico al de las plantillas :S.

Unknown dice...

Hola Jaime, se encuentra en tu blog material de calidad y "muy original",te felicito me ha sido de gran ayuda.
Mi pregunta, como seria al reves este truco,que el gadget se inicie espandido y lo contraiga el lector.

Saludos.

Jaime Trujillo Escobedo dice...

Ser Mejor, para eso necesitas instalar este otro truco.

No tiene el efecto deslizante tan atractivo pero es muy fácil de utilizar y bastante útil.

Pela dice...

Puse una imagen en lugar del texto, pero esa imagen queda alineada a la izquiera, he probado, pero no logro dejarla en el centro, si andás por allí, tirame un dato!!jajaja!!, gracias. :D

Jaime Trujillo Escobedo dice...

Pela, aunque no logré localizar la imagen con el truco en tu blog te recomiendo hacer lo que explico en esta entrada.

kitty dice...

Hola Jaime,ante todo darte las gracias por tu blog,ya que no veas lo bien que viene cuando no se sabe nada de html.
He seguido todos los pasos que explicas para expandir y contraer gadget,en mi caso los blog que visito.No veas que sudores que me entran cada vez que veo Edicion HTML...y lo consegui, pero el problema ahora es el siguiente:
Que quisiera que se vieran unos pocos de blog, el resto permaneciran ocultos y si el visitante quisiera ver el resto.Tus palabras las cambie por SIGUE MI LISTA pero esta al principio del gadget y si no le pinchas permanecen todos ocultos.

Jaime Trujillo Escobedo dice...

Kitty, veo que has utilizado el truco en el gadget 'Lista de Blogs'. En mi opinión, no hace falta aplicar este truco ya que si accedes al apartado de Diseño>Elementos de la página y haces clic en el enlace Editar del artilugio, comprobarás que hay una opción denominada Mostrar... y un menú desplegable a continuación en el que encontrarás la opción de mostrar 5, 10 o 25 blogs.

Al hacer esto, el resto de los elementos que componen tu lista permanecerá oculto (aparecerá un enlace denominado "Mostrar todos" al final del gadget para que el lector despliegue la lista completa).

¡Saludos!

kitty dice...

Muchas gracias, me has sido de gran ayuda. Un saludo.

Jaime Trujillo Escobedo dice...

¡Bienvenida Kitty! Tu blog está precioso, sigue así.

Saludos.

Cocina dice...

Hola Jaime!!:D
estube buscando esta entrada elbalcondejaime.blogspot.com/2009/05/tu-blog-en-un-movil.html pero me dice que no existe...podria ayudarme?
un abrazo !

Jaime Trujillo Escobedo dice...

Hola Claudia. Dicha entrada fue suprimida hace tiempo. Pronto actualizaré el apartado de 'Generadores' en donde muy probablemente incluya una entrada con respecto a los blogs en versión móvil.

Anónimo dice...

ola jaime! soi drea y esoty haciendo un blog, e añadido varias cosillas, de las qe pones en tu blog, (purpurina, imagenes qe se iluminan...) y otras cuantas de otras! me sirve mucho tu blog! gracias por ayudarnos a mejorar nuestros Blogs!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo