Lista animada de post recientes (SPYLIST)

Mostrar una lista de los post más recientes en la barra lateral es una gran manera de mantener a los visitantes ocupados revolviendo tu mercadería. Existen un montón de dispositivos y gadgets que se pueden utilizar para mostrar tus últimos posteos, pero la que recomendamos en este post definitivamente atraerá la atención de mucha gente a su blog.

Este widget de mensajes reciente es similar a los mensajes  recientes con miniaturas estándar, pero con un gran aparato que le da un giro atractivo a la cosa. Se muestran los post más recientes e incluye una miniatura pequeña, pero tiene el extra añadido de la utilización de un efecto animado que suavemente los desplaza a través de la pila vertical.

Se puede ver un ejemplo de como trabaja el gadget en éste y éste otro blog. Las diferencias entre uno y otro se deben a adaptaciones en el ccs que puedes hacer con un poco de maña.

Este widget diseñado por Abu Farhan, no solo es hermosos y decorativo , sino que ha presentado algunos problemas desde hace unos meses. Esto se debió a que los archivos java (.js) no se encontraban disponibles y suplir esto subiendo otras copias a servidores propios no es algo que el común de los usuarios pueda hacer.

El mismo Abu nos suministra entonces el código que aquí les traigo y que no requiere de ningín archivo java ya que el script esta incluido. Solo debes abrir un nuevo elemento HTML en tu barra lateral y cargar el siguiente código.

Si en tu blog ya cuentas con una llamada a jquery, te recomiendo que elimines la primer sentencia de este archivo (borra la parte que dice

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> )

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:520px; } #spylist ul{ width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate{ overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> </style> <script language='javascript'> imgr = new Array(); imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[1] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[2] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[3] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[5] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[6] = "http://i43.tinypic.com/orpg0m.jpg"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70; thumbheight = 90; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.YOURBLOGNAME.blogspot.com/"; limitspy=6 intervalspy=4000 </script> <div id="spylist"> <script type='text/javascript'> //<![CDATA[ /* * By Abu Farhan (www.abu-farhan.com) */ jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push(" <li>"+e(this).html()+"</li> ")});o=i.length;l.wrap('<div class="spyWrapper" /> ').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;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!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v=' <li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate"> '+n+'</div> <div class="spycomment"> '+cmtext+"</div> ";document.write(v);j++}document.write("</ul> ")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>'); //]]> </script> </div>
Gracias a Abu Farhan por este código.

Importante: Si nos fijamos en el código donde se encuentra http://www.YOURBLOGNAME.blogspot.com/ se debe reemplazar esto con la URL de su blog.

Cambios opcionales: No hay límite con los cambios que se pueden hacer en el código pero lo básico sería cambiar la cantidad del número de mensajes que se desplazan , cosa que se hace mediante:

numposts = 10;

Se puede cambiar el valor numérico para mostrar lo que usted desee.