EMFF, reproductor flash de m?sica MP3

EMFF es un reproductor en flash para escuchar m?sica MP3 en el blog, su instalaci?n es como la de la mayor?a de los reproductores de su tipo, y su uso tambi�n. Sin embargo EMFF admite listas de reproducci?n y adem?s posee varios skins para que pueda adaptarse a los gustos de cada quien.

Puedes verlos funcionando aqu? mismo en esta entrada.


Old no border

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Lila Info

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="200" height="55"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Easy Glaze

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="32" height="32"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Position Blue

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="100" height="50"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Silk

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="84" height="32"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Silk Button

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="16" height="16"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Stuttgart

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="140" height="30"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Wooden

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="120" height="60"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Para usarlo s?lo necesitas descargar este archivo, descomprimirlo, y subir uno de los archivos SWF a un hosting. Luego pega el c?digo del reproductor que m?s te guste en un elemento HTML/Javascript de tu blog, o incluso una entrada, ah? agrega la URL del archivo SWF que subiste previamente (s?lo el que hayas elegido), ver?s que debes agregar la URL dos veces. Tambi�n agrega donde se indica la URL de tu canci?n y listo.

Puedes agregar m?s de una canci?n, s?lo a?ade las dem?s URLs de las canciones una seguida de la otra, pero todas separadas por una coma, por ejemplo:

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3 uno,URL del archivo MP3 dos,URL del archivo MP3 tres"> </object>

Tambi�n podemos usar tres par?metros, autoplay, repetir, y aleatorio:

&amp;autostart=yes &amp;repeat=yes &amp;shuffle=yes

Cualquiera de ellos se agrega al final de la ?ltima URL de la canci?n, por ejemplo, si us?ramos los tres se ver?a as?:

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3&amp;autostart=yes&amp;repeat=yes&amp;shuffle=yes"> </object>

Como puedes ver es un reproductor de f?cil uso, sencillo y visualmente agradable. En la siguiente entrada veremos c?mo crear listas de reproducci?n en formato XML. Si ya sabes crear listas XML entonces siempre has de cambiar esta l?nea del reproductor:

<param name="FlashVars" value="src=URL del archivo MP3">

Por esta otra:

<param name="FlashVars" value="playlist=URL del archivo XML">

En el caso de las listas de reproducci?n XML la URL del archivo nunca deber? llevar el protocolo seguro de transferencia de hipertexto, es decir, que en vez de que sea HTTPS ser? HTTP. V?a | EMFF

Kontactr: formulario de contacto para el blog en un 2 x 3

Hay muchos sitios que ofrecen formularios de contacto, pero este en particular me gusta por lo r?pido que es para obtenerlo. Pero adem?s de lo f?cil y r?pido que es, tiene una gran ventaja sobre la mayor?a de los formularios de contacto gratuitos: que no tiene un l?mite de env?os mensual, as? que que puedes dejar de preocuparte si te excedes o no.

El servicio no cobra ni un solo centavo, pero tiene una desventaja, y es que si bien podemos personalizar los colores no podemos cambiar el nombre de los campos ni agregar o eliminar m?s. Aun as?, es muy intuitivo y b?sico, por lo que a muchos puede servir en caso de que no requieran algo muy sofisticado.

Para tener este formulario de contacto en tu blog entra a la p?gina de Kontactr y reg?strate, no te lleva ni 30 segundos. Una vez hecho eso te enviar?n un correo de confirmaci?n.

Cuando confirmes tu cuenta podr?s iniciar sesi?n y copiar el c?digo de tu formulario, p�galo donde quieras y listo.

No hay que hacer nada m?s, pero puedes personalizar sus colores si lo deseas. Para ello haz click en Customize y cambia los colores que desees para cada ?rea.

El formulario lo puedes pegar en una entrada, en una p?gina est?tica, o un gadget HTML/Javascript. Los correos que te env?en atrav�s de �l te llegar?n al correo con el que te diste de alta.

Lo dicho, es un formulario r?pido de obtener, f?cil de usar y sin tantas pretensiones. Su punto d�bil es no poder editar los campos, pero al ser gratuito y sin l?mite de env?os es un formulario de contacto que definitivamente hay que considerar.

Las condicionales de Blogger y las redirecciones por pa?s

Muchos est?n ya familiarizados con el uso de las condicionales de Blogger, esos c?digos que nos permiten restringir la visibilidad de un elemento, o la ejecuci?n de un script en ciertas partes del blog, tal como alguna vez vimos en la entrada sobre c?mo ocultar gadgets y elementos en distintas partes del blog.

Y aunque todo eso funciona bien -siempre que est� bien aplicado-, se presenta un problema desde que los blogs tienen una direcci?n diferente seg?n el pa?s donde se ve.

Esto es que quienes usan una condicional para que equis elemento se ejecute/muestre o no en una p?gina de etiqueta en particular, o una entrada, o p?gina espec?fica tienen problemas con estas direcciones por pa?s.
Sucede porque cuando copian la URL de la p?gina, copian la URL redireccionada, por ejemplo:

http://nombre-de-mi-blog.blogspot.com.es/2011/04/lorem-ipsum.html

O bien:

http://nombre-de-mi-blog.blogspot.es/2011/04/lorem-ipsum.html

Con lo cual, si agregamos en la condicional la URL de esa manera entonces no funcionar?.

http://nombre-de-mi-blog.blogspot.com.es/2011/04/lorem-ipsum.html

http://nombre-de-mi-blog.blogspot.com/2011/04/lorem-ipsum.html

Entonces, siempre que usemos una URL en una condicional, deberemos poner la URL can?nica, es decir, SIN la extensi?n del pa?s.

<b:if cond='data:blog.url == &quot;http://nombre-de-mi-blog.blogspot.com.es/2011/04/lorem-ipsum.html&quot;'>

<b:if cond='data:blog.url == &quot;http://nombre-de-mi-blog.blogspot.com/2011/04/lorem-ipsum.html&quot;'>

De esa forma la condicional podr? cumplir su funci?n sin problema.

Botones de Ir Arriba e Ir abajo con jQuery

Hace poco vimos c?mo poner un bot?n de Ir arriba con jQuery, pues esto es parecido, pero no igual. Esto es porque los botones siempre est?n visibles a diferencia del otro, y s?lo se desvanecen ligeramente cuando movemos el scroll de la p?gina, pero adem?s, tambi�n incluye la funci?n de ir hasta abajo del blog.

Puedes ver un ejemplo en este blog de pruebas, los botones se encuentran en la parte inferior izquierda.

Veamos entonces c?mo poner los botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento usando jQuery.

Lo primero es entrar en la Edici?n HTML y pegar antes de ]]></b:skin> los estilos:

/* Botones de Ir arriba e Ir abajo con jQuery
----------------------------------------------- */
.nav_up{
padding:7px; /* Distancia entre el borde y el ?cono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidn2orw3LMkWUVCJT9QLQMcA7cPHmcUgJbmMy3D7VrXK5FAL9iYsxNsxrRoeGkxNqsAUmceMpk18tru4YoyMUK6-uZV3IBOat3kT7COzKWISVXBG9cWmbBveIDAOwRdyhl0YSfHSgQhc4/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del bot?n */
height:20px; /* Alto del bot?n */
bottom:10px; /* Distancia desde abajo */
left:30px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px; /* Distancia entre el borde y el ?cono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSGgvr3OyAb8uo4fZVJWchrkHicDJyXRqmQsqWMMGiUEYtepYty3qoyVMovSktv08cGZ-7INxm0_yO1P965YQrvg6kOMU1cUBLGr94-fdLrrFzASmkjczxm17yuHyxi0CB3CKgt6gzMN0/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del bot?n */
height:20px; /* Alto del bot?n */
bottom:10px;
left:70px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Luego antes de </body> pega este c?digo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Y listo, as? se sencillo. En el primer c?digo puedes ver en color verde algunos estilos que puedes modificar. Las flechas son im?genes, as? que puedes cambiarlas por otras cambiando las URLs de las mismas que se encuentran tambi�n en el primer c?digo. Si quieres cambiarlas del lado derecho ah? mismo ver?s qu� valores debes modificar.

En el segundo c?digo he puesto en color gris el script de jQuery, s?lo para distinguirlo, por si ya lo tuvieras no lo agregues de nuevo.

Si usas Scriptaculous podr?as aplicar el "parche", pero si no te quieres complicar la vida usa estos botones con Scriptaculous.

V?a | Codrops

Slider autom?tico para mostrar las ?ltimas entradas del blog (Easy Slider)

Este es un slider que Abu Farhan adapt? del Easy Slider, un slider hecho con jQuery, y que con su adaptaci?n lo ha hecho autom?tico de manera que muestre las ?ltimas entradas del blog tal como el slider autom?tico que vimos hace algunas semanas, es decir, que el slider mostrar? las ?ltimas entradas del blog de forma autom?tica, sin necesidad de agregar manualmente las entradas.

Nosotros por nuestra parte, hemos modificado un poco el slider, no mucho en realidad, s?lo hemos cambiado la forma como se muestran los res?menes de las entradas, y en lugar de usar servicios externos para alojar los scripts, los alojaremos directo en la plantilla.

El demo del slider lo puedes ver aqu? mismo en esta entrada.

Para poner este slider en tu blog entra en la Edici?n HTML, y antes de ]]></b:skin> agrega los estilos:

/* Easy Slider (Autom?tico)
-------------------------------------------------------------------- */
#slide-container {
width:480px;
height:320px;
position:relative;
}
#slider {
width:480px;
height:320px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
}
.slide-desc {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU9-FQ9UbvwXgzxHswUiSa-1qNxYzMEHUp1pmEIIM2df5F3G3x0KHeFo7BZIK4yK8dR41XWe_Gb1pEnMzdKY6r9zXp0cCOfeM7ejtuVU94pGab4UB3ICQFRUrqcaduRvelHIbyJJGV4IY/s30/bgtransparent.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
text-align:left;
bottom:0;
width:100%;
z-index:99999;
}
.slide-desc h2{
display:block;
color:#f2f2f2;
font-size:14px;
}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:480px;
height:320px;
overflow:hidden;
}
#prevBtn, #nextBtn {
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn {
left:500px !important;
}
#prevBtn, #nextBtn {
display:block;
left:0;
position:absolute;
top:132px;
width:30px;
height:77px;
z-index:1000;
}
#prevBtn a, #nextBtn a {
display:block;
position:relative;
width:30px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tr1oBY1JyP9_f7pw86AeVfeoLUeOGwwyKnqfCiIfNFpeTfmOc96cN_JjksaAyj5fq4c7CaIJFmMvpL1eco5Mxbfngh6W91QMADdzH8_tmqciT97tj4LoV2pDktmF7QGC82wCzhpiGfE/s77/flecha-prev.png) no-repeat 0 0;
}
#nextBtn a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqGglCGz1qOOIgTS1Ciks1LI8QuYLEhZoiQDMFaMzy_6tGZfz9z1hHG4gQRf0o6rn5ljEzO0AYbd6iFiGqT5Eue1dHhu-_1htv9A6Y0Fp08gUjyn2p7wJl5PIlobmsvL7VbOsWnBfkNBw/s77/flecha-next.png) no-repeat 0 0;
}
/* Estilos de los n?meros */
ol#controls{
margin:8px 25px;
padding:0;
height:28px;
}
ol#controls li{
margin:0 4px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #000; /* Borde de los n?meros */
background:#0B243B; /* Color de fondo de los n?meros */
color:#fff; /* Color de los n?meros */
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1; /* Color de fondo del n?mero activo */
color:#fff; /* Color del n?mero activo */
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

Ahora antes de </head> agrega este script:

<script>
//<![CDATA[
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal = 150;
var numposts_gal = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul>');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXX8hxeS86807_6gdI94YeFJdXa8A4hjyzB1rItqSjddROFuCFoHAbQwaIDiLXQr6hqKraLEHgk6oezAtyPZY6NMc25hPprLN_syyMskW3bMtf8RbD_PJKc7yCFmv58e5Ri4JcYLqfYtM/s0/sin-imagen.png';
document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="320"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
//]]>
</script>

Lo siguiente ser? pegar antes de </body> este script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
*/
(function($){$.fn.easySlider=function(options){var defaults={prevId:'prevBtn',prevText:'Previous',nextId:'nextBtn',nextText:'Next',controlsShow:true,controlsBefore:'',controlsAfter:'',controlsFade:true,firstId:'firstBtn',firstText:'First',firstShow:false,lastId:'lastBtn',lastText:'Last',lastShow:false,vertical:false,speed:800,auto:false,pause:5000,continuous:false,numeric:false,numericId:'controls'};var options=$.extend(defaults,options);this.each(function(){var obj=$(this);var s=$("li",obj).length;var w=$("li",obj).width();var h=$("li",obj).height();var clickable=true;obj.width(w);obj.height(h);obj.css("overflow","hidden");var ts=s-1;var t=0;$("ul",obj).css('width',s*w);if(options.continuous){$("ul",obj).prepend($("ul li:last-child",obj).clone().css("margin-left","-"+w+"px"));$("ul",obj).append($("ul li:nth-child(2)",obj).clone());$("ul",obj).css('width',(s+1)*w)};if(!options.vertical)$("li",obj).css('float','left');if(options.controlsShow){var html=options.controlsBefore;if(options.numeric){html+='<ol id="'+options.numericId+'"></ol>'}else{if(options.firstShow)html+='<span id="'+options.firstId+'"><a href=\"javascript:void(0);\">'+options.firstText+'</a></span>';html+=' <span id="'+options.prevId+'"><a href=\"javascript:void(0);\">'+options.prevText+'</a></span>';html+=' <span id="'+options.nextId+'"><a href=\"javascript:void(0);\">'+options.nextText+'</a></span>';if(options.lastShow)html+=' <span id="'+options.lastId+'"><a href=\"javascript:void(0);\">'+options.lastText+'</a></span>'};html+=options.controlsAfter;$(obj).after(html)};if(options.numeric){for(var i=0;i<s;i++){$(document.createElement("li")).attr('id',options.numericId+(i+1)).html('<a rel='+i+' href=\"javascript:void(0);\">'+(i+1)+'</a>').appendTo($("#"+options.numericId)).click(function(){animate($("a",$(this)).attr('rel'),true)})}}else{$("a","#"+options.nextId).click(function(){animate("next",true)});$("a","#"+options.prevId).click(function(){animate("prev",true)});$("a","#"+options.firstId).click(function(){animate("first",true)});$("a","#"+options.lastId).click(function(){animate("last",true)})};function setCurrent(i){i=parseInt(i)+1;$("li","#"+options.numericId).removeClass("current");$("li#"+options.numericId+i).addClass("current")};function adjust(){if(t>ts)t=0;if(t<0)t=ts;if(!options.vertical){$("ul",obj).css("margin-left",(t*w*-1))}else{$("ul",obj).css("margin-left",(t*h*-1))}clickable=true;if(options.numeric)setCurrent(t)};function animate(dir,clicked){if(clickable){clickable=false;var ot=t;switch(dir){case"next":t=(ot>=ts)?(options.continuous?t+1:ts):t+1;break;case"prev":t=(t<=0)?(options.continuous?t-1:0):t-1;break;case"first":t=0;break;case"last":t=ts;break;default:t=dir;break};var diff=Math.abs(ot-t);var speed=diff*options.speed;if(!options.vertical){p=(t*w*-1);$("ul",obj).animate({marginLeft:p},{queue:false,duration:speed,complete:adjust})}else{p=(t*h*-1);$("ul",obj).animate({marginTop:p},{queue:false,duration:speed,complete:adjust})};if(!options.continuous&&options.controlsFade){if(t==ts){$("a","#"+options.nextId).hide();$("a","#"+options.lastId).hide()}else{$("a","#"+options.nextId).show();$("a","#"+options.lastId).show()};if(t==0){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}else{$("a","#"+options.prevId).show();$("a","#"+options.firstId).show()}};if(clicked)clearTimeout(timeout);if(options.auto&&dir=="next"&&!clicked){;timeout=setTimeout(function(){animate("next",false)},diff*options.speed+options.pause)}}};var timeout;if(options.auto){;timeout=setTimeout(function(){animate("next",false)},options.pause)};if(options.numeric)setCurrent(0);if(!options.continuous&&options.controlsFade){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}})}})(jQuery);

$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: false // Cambiar a true si se quiere mostrar la paginaci?n de n?meros
});
});
//]]>
</script>

Por ?ltimo entra en la secci?n de Dise?o y agrega un elemento HTML/Javascript, ah? pega esto:

<div id="slider">
<script style="text/javascript">
var numposts_gal = 10; // N?mero de entradas a mostrar
var numchars_gal = 150; // N?mero de caracteres en el resumen
var random_posts = false; // Cambiar por true si se quieren aleatorios
</script>
<script src="http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Cambia el nombre de tu blog donde se indica y listo.
En color naranja puedes ver algunas variantes, una de ellas es que con numeric podemos hacer desaparecer las flechas y en su lugar mostrar una paginaci?n con n?meros para poder navegar por las entradas del slider.
En el ?ltimo c?digo podr?s ver d?nde configurar el n?mero de entradas a mostrar, el n?mero de caracteres en el resumen, y si se desea que las entradas aparezcan de forma aleatoria.

Si deseas cambiar el tama?o del slider cambia todos los width:480px; y height:320px; que encuentres, incluyendo los de esta ?rea:

<img src="' + thumburl_gal + '" width="480px" height="320"/>

Las flechas son im?genes, as? que si deseas modificarlas en color o forma tendr?s que cambiar las URLs que se encuentran en el primer c?digo.

Como puedes ver, es un slider con muchas ventajas, la principal es que muestra el contenido de forma autom?tica, sin necesidad de estar agregando entrada por entrada; pero adem?s, la posibilidad de elegir la paginaci?n y las entradas de forma aleatoria le dan un extra.

V?a | Abu Farhan