Widget rotador de artículos destacados

El factor principal para que un blog triunfe son los artículos, que deben ser interesantes y originales. Si tus obras, ya sean descripciones, poemas o historias... son apreciadas por los lectores del blog, no dudes en hacer lo posible para que puedan acceder a ellas con facilidad.

Por ello he decidido idear este widget, para difundir de manera divertida los artículos 'destacados' del blog. Usándolo, puedes ofrecer resúmenes con su respectivo enlace al post completo, además de una pequeña imagen.

Puedes ver el truco en funcionamiento accediendo a este blog. La instalación te llevará muy poco tiempo y resulta muy aconsejable.

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

Busca la etiqueta </head> y justo encima añade esto:

<style type='text/css'>
#blpostdestacad { width: 200px; height: 230px; border: 1px solid #ddd; background-color: #eee; }
#blpostdestacad a {margin-right:6px; background: #CCCCCC; color:#333333;
float:right; font-size:12px; margin-top:6px; padding:2px;
}
#blpostdestacad a:hover {text-decoration: none; background: #C4C4C4;}
#blpostdestacad div { color:#333333; font-size:12px; height:220px; padding:8px; text-align:left; width:190px; margin-top:0px; font-family:Arial,helvetica,sans-serif;}
bltitulo{font-family:Arial,helvetica,sans-serif; font-size:13px; font-weight: bold;}
#blpostdestacad div img { background:#FFFFFF; border:1px solid #F4F4F4; float:left;
height:80px; margin:2px 8px 0 0; padding:3px; width:80px;}
#blcrr{background: #f2f2f2; padding-left: 4px; width: 80px;
#blpostdestacad div { top: 0; left: 0 }
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js' type='text/javascript'/>

<script type='text/javascript'>
$(&#39;#blpostdestacad&#39;).cycle({
fx: &#39;scrollLeft&#39;,
timeout: 6000,
delay: -3000
});
</script>

Si has instalado previamente el script de jQuery 1.3.2 en tu plantilla con algún otro truco, borra la línea de color grisáceo.

Guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript

Introduce el código necesario para mostrar los artículos destacados:

<div id="blpostdestacad"><div>
<img src="URL IMAGEN" width="200" height="200" />
<bltitulo>TITULO</bltitulo><p>CONTENIDO <a href="URL ARTICULO">Seguir leyendo...</a></p>
</div>
<div>
<img src="URL IMAGEN" width="200" height="200" />
<bltitulo>TITULO</bltitulo><p>CONTENIDO <a href="URL ARTICULO">Seguir leyendo...</a></p>
</div>
<div>
<img src="URL IMAGEN" width="200" height="200" />
<bltitulo>TITULO</bltitulo><p>CONTENIDO <a href="URL ARTICULO">Seguir leyendo...</a></p>
</div>
<div>
<img src="URL IMAGEN" width="200" height="200" />
<bltitulo>TITULO</bltitulo><p>CONTENIDO <a href="URL ARTICULO">Seguir leyendo...</a></p>
</div></div><div id="blcrr"><a href="http://goo.gl/favZ"><img src="http://goo.gl/yFZt" /></a></div>

Sustituye en cada caso:

URL IMAGEN con la dirección de la imagen del artículo.
CONTENIDO con un breve resúmen del artículo (aconsejo que no tenga más de 7 líneas).
URL ARTICULO con la dirección del artículo original, la dirección de la entrada (la encontrarás al abrirla, en la barra de direcciones de tu navegador).

En caso de querer añadir más resúmenes, incluye bloques como este:

<div>
<img src="URL IMAGEN" width="200" height="200" />
<bltitulo>TITULO</bltitulo><p>CONTENIDO <a href="URL ARTICULO">Seguir leyendo...</a></p>
</div>

Hazlo siempre antes de la línea </div><div id="blcrr...

Guarda el gadget y habrás terminado.