Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Rotador automático de entradas recientes en blogger

Ya hemos visto cómo mostrar las últimas entradas con miniatura de imagen (Modo simple), mostrar las últimas entradas de una etiqueta específica en la barra lateral e incluso mostrar de forma aleatoria las últimas entradas en el blog.

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="http://1.bp.blogspot.com/-oqBw6yjCY20/TYorQxTxfpI/AAAAAAAAGPA/4XbyionN3nQ/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.

Samian dice...

Ohh muy bueno! Andaba buscándolo porque tengo el de post destacado pero no entradas recientes como este.

MILTON BORYAILLEZ dice...

muy bueno jaime! ahora dos preguntas! como hago para que muestre solo algunas etiquetas? se lo puse pero quedo estática! dos: como hago para que las imágenes que muestra tengan el mismo tamaño?

Jaime Trujillo Escobedo dice...

Samian, ¡Qué gusto que lo encuentres útil!

Jaime Trujillo Escobedo dice...

Milton, desafortunadamente no puedo orientarte para mostrar exclusivamente unas etiquetas, no porque no quiera hacerlo sino porque el script no cumple con la característica de escoger un tag específico. Es probable que más adelante modifique un poco el código y dicha función te permita hacer lo que buscas.

Con respecto a las imágenes... Me temo que tampoco es posible dado que éstas se muestran en el marco como si del fondo se tratase y por tanto no contienen el código necesario para modificar la imagen o miniatura.

Por suerte puedes personalizar el alto y el ancho del marco y lograr así que la miniatura de imagen aparezca con un tamaño similar.

P.M. dice...

Se que quizá éste no es el sitio indicado para este comentario, pero quería felicitarte por el blog. Algo increíble. Suscripción inmediata y prácticamente obligatoria.

He utilizado varios trucos tuyos.


Un saludo Jaime.


PD.: también te invito a que te pases por mi blog, si tienes algo de tiempo.

Casi tengo 20

Jaime Trujillo Escobedo dice...

¡Bienvenido P.M.! Muchísimas gracias por estas amables palabras que dedicaste al Balcón. La invitación a ti blog ha sido como un regalo pues he podido descubrir los diversos trucos y artilugios que has implementado.

Estaré encantado de tenerte por aquí. ¡Abrazos!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo