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.

Lista de blogs con movimiento personalizable

Lo más probable es que si tienes un blog en blogger conozcas muy bien que existe la posibilidad de añadir gadgets (elementos de página) a la sidebar o barra lateral. Uno de los gadgets más destacados y, al mismo tiempo, más utilizados es el de "Lista de blogs".

Dicho elemento sirve para mostrar lo que lees con un blogroll (lista de enlaces) de tus blogs favoritos.
Lista de blogs con movimiento personalizable en blogger
Hace un tiempo expliqué la forma de personalizar gadget de página y se me ocurrió que darle movimiento no sería una mala idea, por lo que te enseñaré a aplicárselo.

El resultado es bastante prometedor ya que los blogs enlazados se van desplazando hacia arriba, haciendo posible el que tu blog cargue con mayor rapidez.

Puedes ver un ejemplo en este blog de pruebas.

¿Te gusta el resultado? Sigue los pasos para conseguir la lista de blogs en movimiento...

Comprueba que has añadido el gadget "Lista de blogs":


Lista de blogs con movimiento personalizable en blogger


En caso de no tenerlo, agrégalo a tu barra lateral.


Diseño>Edición de HTML>expandimos artilugios




Busca esta línea:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>


Lo que ves en naranja es el título de mi gadget. El tuyo tendrá el título que le hayas atribuido.

Un poco más abajo encontrarás esta otra línea:

<b:includable id='main'>

Ahora borra desde esta línea hasta su etiqueta de cierre </b:includable> (ambas incluidas) como te muestro a continuación:

Ver / Ocultar el código
<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>

<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'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>

<div class='item-content'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>

</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>


Una vez eliminado, inserta este otro código en su lugar:

<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'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<marquee direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' scrolldelay='1' style='height: 240px; padding: 4px; border: 2px solid #cccccc;'><ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon' style='visibility: hidden; display: none;'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title' style='margin-bottom: 14px; font-size: 14px; text-decoration: none;'>
<a expr:href='data:item.blogUrl' style='text-decoration: none;' target='_blank'>
<img src='http://icons3.iconfinder.netdna-cdn.com/data/icons/Sizicons/12x12/arrow_2_right_round.png'/> <data:item.blogTitle/>...</a>
</div>
<div class='item-content' style='text-decoration: none;'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' style='color: #006633; text-decoration: none;' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>...
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time' style='margin-top: 6px; color: #006633; text-align: right;'>
<img src='http://icons3.iconfinder.netdna-cdn.com/data/icons/circular%20icons/bullet_black.png' style='padding-right: 4px;'/><data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='margin-bottom: 14px; border: 3px solid #ccc; clear: both;'/>

</li>
</b:loop>
</ul></marquee>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>

</span>

<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>

En caso de querer editar el movimiento, reemplaza el valor 1 (marcado en rojo) por 2, 3, 4...

Para cambiar la dirección y hacer que los blogs "bajen" en lugar de que "suban" cambia up por down.

Guarda el gadget para terminar.

¡Ya podrás disfrutar de una bonita lista en movimiento!

♥ Ana dice...

Holasssss, ¡¡ya lo he puesto!!, he cambiado el color de las letras, y del borde y el tamaño, pero, me da la sensación de que como tengo varios gadgets puestos en el blog, me ralentiza mucho, así que lo dejaré unos días a ver como va y, luego decidré si lo dejo o lo quito, si es que, metemos tantas cosas al blog, que no puede ser, jajajaja
El haberlo puesto de un tamaño mayor ¿crees que también me ralentiza el blog?, es que de 240 px que has puesto tú, yo, le he dado un valor de 840 px
Gracias, Jaime, como siempre me encantan tus trucos,son fabulosos, anda que no salen ideas de tu cabecita, la tienes muy bien amueblada, jajaja
Un abrazo grandote

Jaime Trujillo Escobedo dice...

Ana, en realidad la lista de blogs con movimiento en sí no ralentiza el tiempo de carga. Está construida a partir de la propiedad marquee y por tanto no necesitamos hacer uso de scripts externos.

El tamaño no debería importar ya que lo que se carga en el blog son los elementos que componen la lista (blogs amigos) ;).

Por otro lado, como bien dices, al tener muchos gadgets en las barras laterales, el blog puede demorarse un poco al cargar.

Queda a elección tuya, (aunque te entiendo perfectamente, yo también solía añadir miles de gadgets al Balcón... jajajaja).

¡Un gran abrazo!

Unknown dice...

Hola Jaime, muchas gracias por tu explicación, lo puse en mi blog e incluso le pude modificar los colores para adaptarlos a los de el mío, y me gusta como ha quedado, sobre todo porque ocupa menos espacio que la que trae por defecto Blogger.
Un abrazo.

Jaime Trujillo Escobedo dice...

Gracias a ti, Cabeza de novia. Es cierto, muchas de las plantillas que blogger ofrece suelen tener las cosas un tanto "ajustadas", pero por suerte prácticamente todo es personalizable ^^.

Cocina dice...

Jaime!!este gadget tambien lo he puesto!!:)
saluditos!!
gracias por todo!!
C.M

Jaime Trujillo Escobedo dice...

¡Ya veo, Cocofansclub! Te ha quedado muy bien.
lo mejor del gadget es que puedes escoger su altura aún teniendo un gran número de blogs enlazados.

¡Gracias a ti por comentar!

Angela♥ dice...

Hoolaa, veras lo que yo quiero es que los botones de publicidad en mi blog se muevan, pues ya se lo he visto a otros blogs.
Pero es que lo mio es layout y todo va por codigo, aqui te djeo la url,

disneystarstv.blogspot.com

Haber que se puede hacer... :)

Jaime Trujillo Escobedo dice...

Disney StarS, me ayudaría mucho el conocer la dirección de alguno de los blogs en los que has visto el efecto para poderte ayudar ya que aún no se con exactitud lo que deseas.

Vidifer dice...

he tenido que quitar el simbolito ese, para poder mandarte el comentario, por mas que miro no veo esa linea que dices. Besos.

Vidifer dice...

Hola Jaime, estoy intentando cambiarlo pero no veo esto
b:includable id='main'
despues de lo de mi lista de blog, me aparece esto
/b:section
/div

!-- spacer for skins that want sidebar and main to be the same height--
div class='clear' /div

/div !-- end content-wrapper --

div id='footer-wrapper'
b:section class='footer' id='footer'
b:widget id='HTML4' locked='false' title='' type='HTML'/
b:widget id='HTML8' locked='false' title='' type='HTML'/
/b:section

Jaime Trujillo Escobedo dice...

Vidifer, entonces borra todo lo que haya entre la etiqueta <div class='widget-content'> y el cierre <b:include name='quickedit'/>
</div>
(sin incluir estas líneas) y pega el código que ofrezco en la entrada y que se encuentra entre dichas etiquetas que acabas de borrar en tu plantilla.

¡Suerte!

TESVA dice...

Hola JAIME,tengo ganas de poner los blogs con movimientos, pero no veo en este código las palabras que tengo que eliminar,espero que puedas contestarme
un saludo,y aqui tienes una nueva seguidora

Jaime Trujillo Escobedo dice...

Bienvenida Antesva! ¿Has marcado la casilla "Expandir plantilla de artilugios"? Si no lo has hecho, el código a eliminar no aparecerá.

Muchísimas gracias por unirte como seguidora del Balcón.

TESVA dice...

Hola JAIME,ya he marcado la casilla de " expandir plantilla de artilugios" y creo que ya tengo localizado el código, pero no me atrevo a quitarlo sin comentarte, todo ese pedazo de código tengo que borrar, desde hasta
y luego pegar el que tienes puesto
esque todabia no soy muy experta en esto, ( gracias )

Jaime Trujillo Escobedo dice...

Antesva, olvida mis indicaciones iniciales y haz clic en el enlace 'Ver / Ocultar el código'; Comprueba que aparece una sección en rojo (prácticamente todo el código). Elimina por completo toda esa sección y guarda la plantilla para comprobar el resultado ;).

TESVA dice...

Jaime ,ya boi avansando, me ha salido la listas de los blogs que visito, ya hire poniendo mas, me falta ponerlos con movimiento, uf que complicaillo jajaaaaaaa
( gracias de corazón )

TESVA dice...

Jaime , que tengo que hacer para que suban los blogs ( gracias )

TESVA dice...

Hola Jaime ya he puesto el código y los blogs amigos , a hora ( que devo hacer para darle movimientos )
gracias

Jaime Trujillo Escobedo dice...

ANTESVA, no es necesario hacer nada más, al añadir el código se percibe el movimiento :S.

Agregaste el gadget con tus blogs amigos pero, ¿Reemplazaste el código HTML desde la plantilla y con los artilugios expandidos?

TESVA dice...

Hola Jaime, creo que lo hice bien, ledi a expandir artilugios , elimine el código y pegue el otro
ya tengo en mi blogs , los blogs que cotilleo pero sin movimientos
pero como todabia soi un poco torpe en esto
de todas maneras gracias Jaime por ayudarme

Jaime Trujillo Escobedo dice...

ANTESVA, acabo de fijarme en tu blog Comidas y Postres y encontré el problema: dado que utilizas una de las nuevas plantillas que ha incluído blogger, el código debe cambiarse.

Intentaré actualizar esta entrada o publicar una nueva que explique la manera de conseguir una lista de blogs en movimiento.

Abrazos!

Driwrgy dice...

Esta aplicación no consigo ponerla en práctia, no sé por qué me da error... Borro el código, copio el nuevo y sin ni si quiera modificar la velocidad y la orientación, pulso vista previa y me da error...

Driwrgy dice...

Ana de viento y bambú, una chica que acabo de conocer hoy, me ha dicho que este truco sólo sirve para plantilla mínima, yo no sé si la mía es mínima o es máxima a razón de la de chismes que tengo y lo extensa que es... Ayhs, qué lio tengo encima, es el primer truco que no me sale, bueno, además de los muñecotes con ictericia que han invadido mi blog...

Driwrgy dice...

Jaime, posibilidad de combinar este truco con la lista de blogs "manipulada" para mostrar las últimas entradas del blog? Imagino que respetando el código del último y siguiendo estos mismos pasos debe valer, no? Quizás así también se acelere la velocidad de carga del blog, puede ser? Gracias. Bss.

Jaime Trujillo Escobedo dice...

Driwrgy, aunque aún no lo he probado puedo asegurarte que podría funcionar. Si lo deseas, intenta aplicarlo al gadget utilizando esta este truco como guía. En caso de no encontrar la forma de conseguirlo, avísame.

Nota: la velocidad de carga del blog no acelerará pero tampoco se retrasará.

Jaime Trujillo Escobedo dice...

Driwrgy, prueba con este otro truco ya que es muy similar y el resultado será satisfactorio en tu plantilla.

Driwrgy dice...

Muchas gracias, Jaima, no había visto tu contestación. Cuantito saque un hueco lo pongo en práctica. Gracias nuevamente. Un besote.

P.D.: Posibilidad de que las respuesta que haces a nuestras preguntas lleguen a nuesto correo? No ve el botón para seleccionar dicha opción aunque puede que sea cosa de mi configuración...

Driwrgy dice...

Vaya, no me había dado cuenta de que habías cambiado la imágen de tu perfil. Se me hizo raro pero no he reparado en el cambio hasta que no he vuelto a esta entrada para tratar de adaptarla a la lista de las últimas entradas publicadas con el truco de la lísta de blogs...

Driwrgy dice...

Prueba conseguida! Algo debió fallamarme la vez anterior pero a la segunda ha ido la vencida! Y es que si se podía hacer con la lista de lectura de blogs, por qué no con la lista de las últimas entradas? Es pura lógica. Qué alegría! Muchas gracias Jaime, eres un crack! Besitos.

Jaime Trujillo Escobedo dice...

Gracias a ti, Driwrgy. Los códigos de ambos widgets tienen prácticamente la misma estructura por lo que adaptar este truco al de las últimas entradas es completamente posible.

Cambié la imagen de perfil hace ya tiempo y aún debería cambiarla ya que dicha fotografía es antigua pero, por un tiempo, lo dejaré tal cual.

He podido ver en tu blog de cocina lo bien que te quedó el menú. Has adaptado sus colores a la plantilla, me gusta el resultado.

¡Un abrazo!

Sonrisagr dice...

Gracias Jaime por tus trucos y consejos, he cambiado la lista de blogs en movimiento y la verdad es que ha quedado bastante bien, me encanta, cuando quieras pasa a verla.
Un saludo.

Jaime Trujillo Escobedo dice...

¡Bienvenida, Sonrisa! Te ha quedado perfecta la lista de blogs; Por cierto, tu blog 'Mi Jardín' me ha parecido muy entretenido.

¡Saludos!

TESVA dice...

Hola Jaime,nuevamente me pongo en contacto con tigo,puedo ya utilizar este código,que pones para darle movimiento a los blogs
gracias ****

Jaime Trujillo Escobedo dice...

Hola Antesva. Gracias a ti por utilizar el código. Ya veo que funciona sin problemas. ¡Saludos!

Anónimo dice...

Hola, antes de nada felicitarte por la gran página que te has currado.

Mi pregunta era a ver si era posible en vez de que te salgan el listado de blogs de abajo hacia arriba a ver si es posible que el listado aparezca ya en pantalla y se mueva hacia arriba.

No sé si me he explicado jejeje. Es decir, que el listado de blogs ya esté visionado sin aparecer dese abajo pero que se vaya moviendo en la dirección que desees ya sea hacia arriba o hacia abajo.

Espero haberme explicado o por lo menos que me hayas entendido jejejej.

Un saludo

Jaime Trujillo Escobedo dice...

Anónimo, te explicaste a la perfección. De hecho, hay un truco publicado que cumple con la característica que buscas, el de las últimas entradas con movimiento.

En este caso, el gadget Lista de blogs no presenta alternativas a la etiqueta marquee (que es la que produce el efecto 'vacio' al mover los elementos hacia arriba).

Es probable que publique un artículo presentando un script para lista de blogs en movimiento.

Anónimo dice...

Muchísimas gracias por responderme. De gran ayuda :)

PD: Feliz Navidad y año nuevo

Jaime Trujillo Escobedo dice...

Gracias a ti, Anónimo. ¡Felices fiestas!

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