49

Mostrar la Lista de Blogs en movimiento

Es algo que me han preguntado en varias ocasiones y que siempre respondía de forma personal a cada uno. Estos últimos días he vuelto a recibir más consultas sobre esto mismo, hacer que el gadget Lista de Blogs se muestre en movimiento.

Es un efecto no muy complicado de conseguir, utilizando la etiqueta "marquee".
Antes de continuar con la explicación, podéis ver un ejemplo en este blog de pruebas, es el gadget que lleva por título "Mi lista de blogs".

[1] Antes de nada tendremos que añadir el gadget "Lista de blogs" y configurarlo tal como vemos en la imagen para añadir el código necesario, una vez conseguido el efecto del movimiento podremos editar el gadget de nuevo si así lo queremos.

Configurar Lista de blogs

[2] Una vez añadido y configurado el gadget de esta manera, vamos a Diseño - Edición HTML y marcamos la opción de "Expandir las plantillas de artilugios".
Tendremos que localizar el código del gadget y añadir el código necesarios tal como veis destacado en color:

<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;'>
<center><marquee direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5' bgcolor = '#faf0e6' style='border: #cdaf95 2px solid;padding-left: 10px;' width='260'>
<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>
</marquee></center>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>


Modificaciones:
height='300' Es el alto del gadget, a mayor valor, más altura y viceversa.
width='260' Es el ancho del gadget, a mayor valor, más anchura y viceversa.
bgcolor = '#faf0e6' Color de fondo del gadget. Si no queremos usarlo eliminamos ese código (bgcolor = '#faf0e6'). Para cambiar el color, sustituimos el código del color (#faf0e6) por el escogido.
border: #cdaf95 2px solid; El borde del gadget. Si no queremos borde, ponemos su valor (2px) en 0, si lo queremos más o menos ancho, aumentamos o disminuimos ese valor. Para cambiar su color, colocamos en #cdaf95, el código del color escogido.
scrollamount='5' Velocidad de desplazamiento, aumentamos o disminuimos el valor (5) para variar la velocidad.
direction='up' Dirección del desplazamiento, en este caso hacia arriba, si ponemos down en lugar de up, el desplazamiento será hacia abajo.

Entradas Relacionadas:

49 comentarios:


Mis cosillas de cocina

Gracias Rosa queda genial!!Siempre nos sorprendes.
Saludos.

Dhampire

Interesante y sorprendente el truco que nos muestras

Unknown

:D sorry, borre el comment anterior, es que olvide agregar el cierre de "/marquee" jajaja

y gracias, quedo bien, aunque tengo que hacerle cmabios de colores.

Saludos.

ORMAKI

Las Pokas/Rosa, me da el mismo error que tu pero donde marquee, como lo tienes que poner?
esta marquee direction, hay que poner una sola " o 2?? gracias por responder¡¡¡

Anónimo

Hola, Rosa:

Tu blog me está resultando muy útil. En este caso tengo un problema, al igual que el resto de gente. ¿Como hay que poner el marquee? He probado cientos de formas diferentes, pero no doy con la solución.

Un saludo.

ORMAKI

gracias¡¡¡ ya lo he conseguido..no habia visto el marque que esta mas abajo¡¡¡ que novata soy¡¡ jaja¡¡¡

ORMAKI

Ahora esta bien, pero me sale la lista por un lado y el scroll por otro vacio, a ver si me explico, me sale la lista fija de blogs, y por abajo sin estar encajado bien con el scroll que va subiendo...he seguido todos tus pasos y lo he repetido, he alargado el marco del scroll sin exito...gracias por tu ayuda¡¡¡

Yessy deVond

Blogger ya puso la votacion de estrellas
pero aun no se ve en plantillas editadas
se puedo poner como se hizo con los botones oficiales de blogger?

Facu.Marin

Rosa, queria consultarte si sabes alguna pagina que brinde un slider de este tipo, o si conocias algun codigo o tutorial para hacer algo asi como lo que se encuentra en esta pagina: http://www.velezsarsfield.com.ar/vm/10-9/nro_34/

El efecto que queria lograr yo es de que las paginas pasen como si fuera una revista.

Gracias por tu ayuda de siempre rosa !!

MamaNunes

:) El marquee rsss! Buenoooooo!
gracias querida! ♥

MAJA

HOLA ROSA, ME QUEDO BARBARO PERO QUERIA PREGUNTARTE COMO HAGO PARA QUE EL ENLACE SEA EL BOTON DEL BLOG, lo que tenga movimiento. Gracias Rosa siempre venis con cosas barbaras

Parlox

Queubo Rosa, que chevere publicación, muy interesante y divertida... y ahize la prueba en mi blog y quedó super chevere... Dios te bendiga y guarde en Su perfecto amor y paz. Juan 3:16
En el amor de Cristo Jesús,
Jonathan Proaño
@PARLOX
parlox.blogspot.com

Anónimo

keanegasteiz Hay dos partes de código que hay que añadir, ambas destacadas en color, una está más arriba y la otra casi al final del código.

ORMAKI ¿Estás configurando el gadget antes de añadir el marquee tal como se muestra en la imagen?

Ƹ̵̡Ӝ̵̨̄Ʒ @YessyGi Ƹ̵̡Ӝ̵̨̄Ʒ Mira en esta entrada:
http://elescaparatederosa.blogspot.com/2008/07/ranking-de-estrellas-en-blogger-ya.html

Facu.Marin No, lo siento, no se de nada parecido que pueda usarse en Blogger.

MAJA No entendí.

MamaNunes ¡Gracias! :F

PARLOX Bendiciones a ti también.

MAJA

hola rosa si capaz que no se como explicarme, yo lo que quiero que tenga movimiento es la lista de los blog que tengo afiliados por boton.

Anónimo

MAJA Yo los veo en movimiento :O

MAJA

si rosa busque todo el dia y lo consegui te agradesco
realmente tu blog es el que mas me ayuda, lo explicas re claro, hace un mes que estoy en esto gracias sos un sol

Monica

¡¡¡¡Precioso me quedo!!!! siempre nos enseñas cosas tan interesantes,para que nuestro blog quede maaaaasssss lindo,Besotes Rosy♥♥

Unknown

En una palabra... enhorabuena!!!!!!!!!!!! como dicen uds jeje es que este truquin tan simple me ha permitido mostrar tooooodo mi miaumundo y es larguito :P

un beso ronroneado y mil abrazos ^_^
pd: Que el otoño llegue a refrescar el calorcito :)

Anónimo

Σ=o) Pau Besote! Y Feliz primavera! :F

C.M.

Muchas gracias Rosa queda genial

Unknown

Hola Rosa.
Me quedo muy bien, lo que pasa es que en IE no funciona, se puede solucionar?
Gracias,

Anónimo

SINEQUANUM Comprobado y funcionando correctamente en Firefox, IE y Chrome, todos en sus ultimas versiones... de las anteriores yo me olvido en cuanto sale una nueva...

Unknown

Hola Rosa...intente poner la lista de blogs en movimiento y al parecer lo consegui...pero por alguna razon se salta muestra dos o tres blogs y se salta al principio otra vez podrias ayudarme plisssssssssssss!!!!!!

Unknown

Rosa le he puesto en direccion "down" y ahora funciona de lo mejor!!! gracias por todos los consejos de tu blog!!

ORMAKI

rosa, gracias por tu respuesta, pero se mueve el scroll pero no la lista de blogs, he hecho de nuevo los cambios pero con la lista de blogs que ya tenia es correcto?? un abrazo y perdona la tabarra que te doy¡¡¡

Dj_GoNz@_Mixer-zone

holaaa muyy buenoo me gustoo muchisimooooooooooo gracias

Jose Miguel

Muchas Gracias Rosa, me ha gustado mucho....

http://lavidaolabolsa.blogspot.com

Anónimo

ORMAKI Puedes hacerlo con la lista de blogs que ya tenías si, siempre que la edites antes de añadir el código y lo hagas como se muestra en la imagen de la entrada.

Clara

Excelente, no sabía que se podía hacer.

Monica Custodio

Rosa, precioso efecto! Yo he conseguido instalarlo pero los blogs .... han perdido su enlace. Es decir veo perfectamente el listado de blogs en movimiento pero no puedo visitarlos.
Debe ser así o hay alguna manera de solucionarlo?
Muchísimas gracias! Muas!

Sito

Hola Rosa, soy nuevo. Llevo tiempo con un blog, pero le quiero dar un impulso. Resulta que quiero publicar una larga entrevista y quiero diferenciar las respuestas y preguntas con otro color, además de negrita y redonda. ¿Cómo cambio el color en la entrada de las respuestas? En esas respuestas de otro color supongo que podré poner una foto. Me gustaría también añadirle sumarios o pequeñas frases de una fuente más grande, como titulillos en medio de los textos, alineados en bandera, y si se puede ladillos. Es que quiero que como la entrevista es larga no tenga mucha barba y no sea pesada. Gracias anticipadas. Mi modesto blog es http://culemania-sito.blogspot.com

Anónimo

Monica Custodio No he tenido problemas para pinchar en cada uno de los blogs de tu gadget...:O

Anónimo

Sito Todo eso que dices puedes hacerlo sin problema desde el editor de Blogger, eso e incluso varias cosas más... en la pestaña Redactar, para eso están los botones del editor...

Monica Custodio

Rosa, miiiiiil gracias!
Gracias a ti estoy aprendiendo muchísimo!
Un besazo!

Sito

Gracias por tu respuesta. Ahora tengo otro problema y no encuentro soluciones con el buscador. Y es que modifiqué el ancho de plantilla y ahora, aunque lo recorto, los gadgets se me quedan abajo. ¿Cómo puedo hacer para que vuelvan al lateral? Gracias

Sito

Por cierto, en el diseñador el ancho de barra lateral no me aparece.

Anónimo

Sito Eso es porque así lo has seleccionado tu en el editor... ve al diseñador y precisamente en Diseño verás la opción de cambiar eso, ajustar anchos y demás... investiga ahí, al blog no va a pasarle nada por probar... para eso está la vista previa.

Unknown

Olá Rosa, são poucas as vezes que comento aqui, mais fiquei curioso com este posters gostei e coloquei nos meus blogs,. Eu gostaria de saber se tem uma caixa desse tipo para que funcione na lista de links/sites na qual funcione como deslizante.
Obrigado e abraço.

Old School Generation

Que genial Rosa, no se como lo consigues pero siempre me sorprendes con algo nuevo.
Eres única!!

Anónimo

lucidreira De la misma manera.
El primer código a colocar va antes de <ul> y el segundo después de </ul>

Fernando QueenSpain

Rosa, hay alguna manera de cambiar el tamaño de la imagen, he probado pero no he podido, igual no se puede. Un saludo.

Anónimo

Fernando Lo cierto es que eso es Blogger quien lo controla.

Monica Custodio

Rosa querida,
Acabo de darme cuenta de que este efecto en internet explorer 8 no se me ve bien.
Te agradecería mucho si pudieras echarme una mano!
Salu2

Noelia

Hola, Rosa, a mi me pasa lo mismo que a Monica con Internet Explorer 8, aparece todo amontonado. He comprobado en Mozilla firefox y en google chrome y no pasa. Si pudieras echarme una mano, gracias.

Anónimo

Noelia Como le dije a Mónica en un correo, no tengo ni idea que puede ser, en el blog de pruebas lo instalé siguiendo estos mismos pasos y, yo al menos, con IE8 lo veo bien...

Angela

Rosa muchas gracias por tu blog, esta excelente y pasando a otra cosa, juro que he hecho todos los pasos pero aun asi me pasa lo mismo que a Ormaki, la marquesina va por arriba y los blogs quedan debajo en lista y encimados con los datos de mi perfil, lo unico que se ve dentro de la marquesina es el icono del blog, ya volvi a configurar la lista incluso con los box que tu tienes seleccionados nada mas, pero nada pasa lo mismo que estoy haciendo mal?

Anónimo

Angela Revisa lo que le respondo a ella... más no puedo decirte...

Moonlight

Hola, Rosa. Tu blog me ha ayudado en muchos momentos, gracias.
No se si puedo poner esto aquí (lo siento si me he equivocado). Veras es que en mi blog quiero poner todos los banners de afiliación en forma de gif para ahorrar espacio, pero no se como ponerlo. Espero haberme explicado bien, gracias.

Anónimo

Moonlight O construyes una imagen sola gif con todos los banners, en la que no podrás añadirle url a cada uno de los banner, o usas algo así:

http://elescaparatederosa.blogspot.com/2008/12/rotador-de-imagenes.html

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