Poner un Scroller con Artículos Nuevos o Relevantes en la Sidebar del Blog

David Walsh nos enseña a crear un scroller simple utilizando la librería MooTools, este scroller lo podemos utilizar para poner post nuevos o relevantes.

Este scroller tiene un aspecto muy simple, con una animación muy elegante, algo que lo comvierte en una herramienta eficaz a la hora llamar la atención de los usuarios del blog, al mostrar una noticia importante. Pueden verlo en mi blog de pruebas.

Para ponerlo en el blog, pero primero tenemos que tener la librería MooTools 1.2.4 en tu plantilla, si ya la tienes en tu plantilla salta este paso, de lo contrario ve a Diseño > Edición de HTML y con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/mootools-1.2.4.js' type='text/javascript'/>

Ya tenemos la librería MooTools en nuestra plantilla, ahora tenemos que añadir el script que le dará vida al efecto, para ello copia el siguiente código y págalo justo después del código que acabas de pegar antes de </head>:

<script type='text/javascript'>
window.addEvent(&#39;domready&#39;,function() {
/* settings */
var list = $(&#39;news-feed&#39;).getFirst(&#39;ul&#39;);
var items = list.getElements(&#39;li&#39;);
var showDuration = 3000;
var scrollDuration = 500;
var index = 0;
var height = items[0].getSize().y;
/* action func */
var move = function() {
list.set(&#39;tween&#39;,{
duration: scrollDuration,
onComplete: function() {
if(index == items.length - 1) {
index = 0 - 1;
list.scrollTo(0,0);
}
}
}).tween(&#39;top&#39;,0 - (++index * height));
};
/* go! */
window.addEvent(&#39;load&#39;,function() {
move.periodical(showDuration);
});
});
</script>

Ahora, añadiremos el código CSS, pega antes de la etiqueta ]]></b:skin> el siguiente código:

#news-feed { height:200px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; }
#news-feed ul { position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0; }
#news-feed ul li { height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden;
}

Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código HTML para llamar al efecto y al estilo css:

<div id="news-feed">
<ul>
<li><strong style="font-size:14px;">Título1</strong><br />Aquí el contenido de tu artículo...<a href="#">Leer Más</a></li>
<li><strong style="font-size:14px;">Título2 </strong><br />Aquí el contenido de tu artículo...<a href="#">Leer Más</a></li>
<!-- Más artículos.... -->
</ul>
</div>

Cambia la # por la url de tu artículo.
Para cambiar el tamaño del Scroller cambia en el código css el alto height:200px;  y el ancho width:300px;. Si el título de los artículos te sale desalineado puedes ver este post donde explico como alinear códigos