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