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.

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