Widget: Rotador de entradas recientes autómatico

Artículo publicado en el blog El Balcón de Jaime,  ver la entrada en su blog original.

Han sido muchos quienes me han preguntado si es posible poner un rotador de entradas recientes que se actualice de forma automática en el blog.

Sí se puede, y se realiza usando el mismo script presentado en la primera entrada sobre este tema y la librería jQuery.

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

Busca la etiqueta </head> y añade antes uno de estos dos códigos:

Para el gadget con imágenes:

<link href='https://sites.google.com/site/scriptsbalcon/b/bljjultimrotad.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>#bljArticjteSlider {
border: 3px solid #5A9CDD;
background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474;
height: 234px; width: 380px;}
.js #bljArticjteSlider .slides li .entry {background: #8CBAE8;width: 378px;}</style>

Modifica lo siguiente para personalizarlo:

border: 3px solid #5A9CDD; Representa el borde o marco azul. Modifica el ancho (3) a tu gusto, el estilo (solid) con ayuda de esta entrada y el color (#5A9CDD) haciendo uso de la tabla de colores.

background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474; Reemplaza URL IMAGEN por la dirección de tu imagen de fondo (en caso de querer utilizarla). #FBB474 Pertenece al color de fondo (anaranjado) que se utilizará si no incluyes la URL de la imagen.

height: 234px; La altura (234) del recuadro general.
width: 380px; El ancho (380) del recuadro general.

background: #8CBAE8; El color de fondo (azul) del rectángulo que contiene el título.
width: 378px; El ancho (378) del rectángulo que contiene el título.

Para el gadget sin imágenes:

<link href='https://sites.google.com/site/scriptsbalcon/b/bljjultimrotad.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>#bljArticjteSlider {
border: 3px solid #5A9CDD;
background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474;
height: 62px; width: 380px;}
.js #bljArticjteSlider .slides li .entry {background: #8CBAE8;width: 378px;}
#bljArticjteSlider .slides li{height: 62px;}</style>

Modifica lo siguiente para personalizarlo:

border: 3px solid #5A9CDD; Representa el borde o marco azul. Modifica el ancho (3) a tu gusto, el estilo (solid) con ayuda de esta entrada y el color (#5A9CDD) haciendo uso de la tabla de colores.

background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474; Reemplaza URL IMAGEN por la dirección de tu imagen de fondo (en caso de querer utilizarla). #FBB474 Pertenece al color de fondo (anaranjado) que se utilizará si no incluyes la URL de la imagen.

width: 380px; El ancho (380) del recuadro general.

background: #8CBAE8; El color de fondo (azul) del rectángulo que contiene el título.
width: 378px; El ancho (378) del rectángulo que contiene el título.

Guarda la plantilla una vez hayas terminado.

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

Incluye esto en su interior:

<div id="bljArticjjteSlider" onmousedown="return false" oncontextmenu="return false" onselectstart="return false"><div><script src="https://sites.google.com/site/scriptsbalcon/b/blgUltimjaime.js" type="text/javascript"></script>
<script language="JavaScript">
blcnJCaImgn = new Array();
blcnJCaImgn[0] = "";
bljjtImagn1 = true;
blcnJCantStl = true;
blcnJCantidad = 10; //
blcnJURLblog = "DIRECCION DE TU BLOG";
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/scriptsbalcon/b/jquerybljjtECycle.js" type="text/javascript"></script>
<script type="text/javascript">
$bljArticjteSlider = { context: false, tabs: false, timeout: 3000, slideSpeed: 1000,
tabSpeed: 1000, fx: 'fade',
init: function() { this.context = $('#bljArticjteSlider'); this.tabs = $('ul.slides-nav li', this.context); this.bljjtescEntrad(); }, bljjtescEntrad: function() { $('div.slides > ul', $bljArticjteSlider.context).cycle({ fx: $bljArticjteSlider.fx, timeout: $bljArticjteSlider.timeout, speed: $bljArticjteSlider.slideSpeed, fastOnEvent: $bljArticjteSlider.tabSpeed, pager: $('ul.slides-nav', $bljArticjteSlider.context), pagerAnchorBuilder: $bljArticjteSlider.prepareTabs, before: $bljArticjteSlider.activateTab, pauseOnPagerHover: true, pause: true }); }, prepareTabs: function(i, slide) { return $bljArticjteSlider.tabs.eq(i); },
activateTab: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $bljArticjteSlider.context);
if(activeTab.length) {
$bljArticjteSlider.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$('body').addClass('js');
$bljArticjteSlider.init();
});
</script><div onmousedown="return false" oncontextmenu="return false" onselectstart="return false" id="bljArticjteSlider" class="bljjt1arr"><div class="slides"><script language="JavaScript"> document.write("<script src=\""+blcnJURLblog+"feeds/posts/default/?max-results="+blcnJCantidad+"&orderby=published&alt=json-in-script&callback=blcnBlogEx\"><\/script>");</script></div></div><a href="http://goo.gl/favZ"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYj8YPxeuK4iuuGajPGxVEj3YrL4fXVaiFkg9yFIDQCE3uwtP9v7EHxTPkpbnj8QFpFBxhnJP5UiMqETICyLPltglMtBdKF4W4OUCNjQG4zWR6J3b-IcARRohxV1-j1isllqb5EVs-2oYw/s320/main-slider.png"/></a></div></div>

Introduce la dirección de tu blog en donde se indica (con color naranja) así como la cantidad de entradas recientes a mostrar (blcnJCantidad = 10; //).

Para modificar la velocidad a la que rotan las entradas debe aumentarse o disminuirse la cifra 3000 en timeout: 3000.

Recuerda que este truco utiliza jQuery por lo tanto, si usas Scriptaculous, Prototype o Mootools seguramente no podrás utilizarlo.

Guarda el gadget y listo.