Gadget de entradas recientes con imagen

Dentro de una pagina web así como la estructura de la misma es esencial mantener un buen orden de lo acontecido en el blog, es muy importante resaltar lo que esta sucediendo, las novedades que cuenta el blog, como ustedes sabrán la innovación esta ligada al éxito, así que una buena forma de mantener actualizados a nuestros viditantes de lo que esta ocurriendo en este caso en el blog es mostrar las entradas mas recientes.

Este útil gadget mostrara las entradas mas recientes, cabe resaltar que tendrá cada entrada una imagen descriptiva, el titulo, fragmento del contenido de la entrada, fecha, comentarios, aquí dejo una imagen para que puedan visualizar mejor:

Así que comencemos, llevara solamente dos pasos para poder disfrutarlo en nuestro blog, en si en el gadget vamos a pegar el diseño css, el script y el html en este caso de la herramienta entradas recientes, así que nos vamos a diseño > Añadir un gadget, escojemos la opción HTML/Javascript y pegamos el siguiente código:

<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:85px;}
.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 = 4;
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://souldhacko.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Bien vallamos al ultimo paso, antes de guardar cambios... nos situamos en la parte del código donde nosotros deberemos poner el url de nuestro blog, para encontrarlo mas fácil lo marque con color rojo, así que como ya habíamos dicho quitas únicamente la parte con el color rojo y lo sustituyes por el nombre de tu blog.

Y bien echo esto lo único que sobra es guardar cambios y disfrutar de este hermoso gadget, si tienes dudas o alguna sugerencia no olviden comentar.