Gadget "Ultimas Entradas" con Imagenes para Blogger

Hoy en esta entrada les hablo sobre un Gadget para blogger que nos ayuda a implementar en nuestro blog las "Ultimas Entradas" (Post Recientes) con imagenes en miniatura .
Bueno yo no lose si es unico este Gadget para Blogger que hacen esta funcion y se pueden agregar a blogger, pero el que yo les presento en esta entrada muestra las imagenes de los post en miniatura, y los numeros de los comentario entre otras caracteristicas.
En esta imagen se puede ver como queda este Gadget para Blogger en tu Blog : 
Para añadir este Gadget para Blogger en tu blog, solo tiene que pegar el codigo de abajo en un elemento HTML/Javascript :
<style type='text/css'> img.recent_thumb {padding:2px;width:70px;height:70px;border:0; float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;} .recent_posts_with_thumbs h4 { text-transform: uppercase; font-size: 14px; } </style> <script type='text/javascript'> //<![CDATA[ function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){ if(entry.link[k].rel=='replies'&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;} if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error) { s=entry.content.$t;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!="")){ thumburl=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg'; } var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">'); if(showpostthumbnails==true) document.write('<img class="recent_thumb" src="'+thumburl+'"/>'); document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>'); if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (showpostsummary == true) { if (postcontent.length < numchars) { document.write('<i>'); document.write(postcontent); document.write('</i>');} else { document.write('<i>'); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0,quoteEnd); document.write(postcontent + '...'); document.write('</i>');} } var towrite='';var flag=0; document.write('<br><strong>'); if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;} if(showcommentnum==true) { if (flag==1) {towrite=towrite+' | ';} if(commenttext=='0 Comments') commenttext='0 comentarios'; if(commenttext=='1 Comment') commenttext='1 comentario'; commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>'; towrite=towrite+commenttext; flag=1; ; } if(displaymore==true) { if (flag==1) towrite=towrite+' | '; towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>'; flag=1; ; } document.write(towrite); document.write('</strong></li>'); if(displayseparator==true) if (i!=(numposts-1)) document.write(''); }document.write('</ul>'); } //]]> </script> <script style='text/javascript'> var numposts = 5; var showpostthumbnails = true; var displaymore = true; var displayseparator = true; var showcommentnum = true; var showpostdate = true; var showpostsummary = true; var numchars = 80;</script> <script src='http://TUBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> Para que el Gadget funciona perfectamente en tu blog, en la última línea debes reemplazar “TUBLOG” por el nombre de tu blog.
Si quieres personalizar o configurar este Gadget aqui les dejo algunas opciones :
Normalmente, puede ser que no necesites hacer ningún cambio extra al Gadget ya añadido; pero sin embargo puedes hacer algunas pequeñas modificaciones para hacer que éste se adapte a tus preferencias.
En los estilos, por ejemplo, puedes ver que el tamaño por defecto de los thumbnails o miniaturas de imagen, es de 70×70 píxeles (segunda línea), y que éstos tienen un borde. También, en los estilos puedes cambiar los estilos de letras.
Al final del código veremos una serie de variables, donde:

• numposts: indica el número de posts que se muestran (por defecto, “5″).
• numchars: indica el número de caracteres de los resúmenes (por defecto, “80″).

Las siguientes variables pueden ser cambiadas de “true” a “false” (o viceversa) para habilitar o deshabilitar alguna de las funciones:

• showpostthumbnails: muestra miniaturas de imagen.
• displaymore: muestra el enlace “Más”.
• displayseparator: muestra una línea de separación entre cada ítem.
• showpostdate: muestra la fecha de cada post.
• showpostsummary: muestra un resumen de cada post.

Como vez es un Gadget Util y muy facil de agregar a nuestro blog solo tiene que copiar el codigo, cambiar “TUBLOG” por el nombre de tu blog y listo, para recibir mas Gadgets y Widgets por correo electronico suscribete gratis al boletin de noticias de GadgetsBlogger.com o añade nuestro feed RSS.
Visto en / ChicaBlogger.com 
.