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.

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

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!