Ultimamente he hecho una serie de modificaciones en el blog que espero os agraden,y entre esas modificaciones esta el gadget de Post Recientes o como yo lo llamo Ultimas Entradas.

Puede haber muchos gadgets que hacen esta funcion pero el que les presento hoy muestra una imagen en miniatura del post,ademas del numero de comentario entre otras caracteristicas.

Vista Previa del gadget.

Hacer Click en la imagen para ver en tamaño completo
Para añadir este truco pega en un elemento HTML/Javascript lo siguiente:
<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>

Reemplaza al final  «TUBLOG” por el nombre de tu blog y listo.

Algunas opciones de configuración…

En general, puede ser que no necesites hacer ningún cambio extra al widget ya añadido; 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.

Via/Chica Blogger


50 comentarios

ayuda blogger · mayo 8, 2012 a las 6:02 pm

no necesitas un gadget html para hacerlo, hay un gadget oficial para blogger que muestra las miniaturas.

Carlos Chamorro · mayo 8, 2012 a las 9:18 pm

Woo.. queria esto pero no lo encontraba ni por aqui ni por aya… gracias.. lo usare NOW!!… y si es cierto este es para personalizable… sean mas agradecidos.. 🙂

    Juvinao · mayo 9, 2012 a las 1:22 am

    Carlos de verdad muchas gracias por tu gran comentario,personas como tu me animan a seguir trabajando en Blogger :]

Andres Ardila · mayo 9, 2012 a las 10:31 pm

Interesante Amigo lo probare haber que tal :F

    Juvinao · mayo 10, 2012 a las 1:19 am

    Pruebalo Andres de seguro quedara muy bien en tu blog.

Anonymous · mayo 10, 2012 a las 12:30 am

Valla esta bastante bueno me gusto saludos juvinao 🙂

    Juvinao · mayo 10, 2012 a las 1:20 am

    Gracias amigo,pruebalo que esta genial 😀

Tinuwel · mayo 10, 2012 a las 11:06 am

Acabo de probarlo y va estupendamente, muchas gracias!!!

    Juvinao · mayo 10, 2012 a las 3:09 pm

    Tinuwel que bueno que te guste,gracias por comentar.

Anonymous · mayo 10, 2012 a las 8:54 pm

Gracias por Conpartir. Salu2

Army_men · mayo 21, 2012 a las 8:03 pm

hola a mi no me muestra bien las imagenes tengo dos imagenes en el post pero solo muestra la segunda, la que esta primero no la muestra pero me agarra la segunda imagen siempre.

como haria para cambiar eso?

    Juvinao · junio 1, 2012 a las 12:36 am

    Habria que editar el script,por ahora no se me ocurre como rediseñar el script 😕

Obed · mayo 31, 2012 a las 9:18 pm

Gracias Juvinao le quedo bien a mi blog.

    Juvinao · junio 1, 2012 a las 12:37 am

    Obed que bueno que le haya quedado bien a tu blog,este es un gran gadget..

    Saludos amigo.

Duo Bissu · junio 23, 2012 a las 9:38 pm

MUCHAS GRACIAS QUEDO DEL 1

Maxi_96 · junio 27, 2012 a las 11:37 pm

hola que tal como puedo hacer para que en vez de que me muestre las entradas recientes en un menu vertical lo haga en un menu horizontal, es decir una al lado de la otra ??

    Juvinao · junio 28, 2012 a las 2:18 pm

    Talvez modificando las condicionales,pero creo que ya hay un gadget similar al que pides.

Susumiyaharuhi03 · junio 29, 2012 a las 12:59 am

esta genial solo una cosa más, un gran duda, como le cambio el tipo de letra del titulo de las entradas… ypues como Maxi_96 dice, si encuentras la manera de hacerlo horizontal sería fabuloso, gracias!!

perlica84 · agosto 25, 2012 a las 1:21 pm

Genial! ha quedado estupendo 🙂

Sgroya · septiembre 23, 2012 a las 1:35 am

Gracias, es justo lo que estaba buscando.. personalizable y de fácil instalación.
Saludos..

    Juvinao · septiembre 23, 2012 a las 5:12 pm

    Sgroya si es muy sencillo y configurable,excelentes cualidades,Saludos 😀 y gracias por comentar

Arq. Fernando Miranda M. · octubre 8, 2012 a las 3:55 pm

Gracias, me sirvió muchísimo!

Arq. Fernando Miranda M. · octubre 8, 2012 a las 3:56 pm

Me sirvio muchisimo. Gracias!

Johao Hernandez · octubre 30, 2012 a las 4:19 pm

hola juvinao, nuevamente por aqui visitando tu blog, en realidad es un blog excelente y mas aun con la apariencia nueva que le diste, se ve un blog mas limpio.

bueno voy a mi pregunta?? este gadget se puede configurar para agregarlo al blg de una forma horizontal? para ponerlo en la cabezera o abajo de ls entradas??

gracias brother, espero tu respuesta

http://cigarrillos-electronics.blogspot.com/

Anonymous · noviembre 1, 2012 a las 11:54 am

Numpost= 10 y solo muertra 3. Porque será? Me esta volviendo loco!!!! no encuentro la solucion. Ayuda por favor

    Juvinao · noviembre 20, 2012 a las 4:19 pm

    No entiendo porque te sucede esto 🙁

Luis · noviembre 13, 2012 a las 11:38 pm

A mí no me funciona, ayuden por favor. otro código??

Luis · noviembre 13, 2012 a las 11:48 pm

perdonen, ya está me equivoqué en algo. Gracias!

    Juvinao · noviembre 20, 2012 a las 4:21 pm

    Luis que bueno que si te funcione,Saludos

Carmen · diciembre 5, 2012 a las 12:16 pm

Muchas gracias! Los gadgets de blogger últimas entradas, no sé por qué,ya no funcionan en mi blog. Este sí. ¡gracias!

Gabriella Yu · diciembre 7, 2012 a las 12:53 am

Anda perfecto, ¡gracias! ^_^

androtecnology · diciembre 17, 2012 a las 12:11 am

gracias, me funciono!!! espero contar con su visita, soy nuevo en esto y estoy preparado un blog sobre android!!! Gracias mil….

laicos dehonianos · diciembre 23, 2012 a las 11:53 pm

Hola, este gadget me ha funcionado muy bien, hasta hoy. La entrada última sólo sale el día y no enlaza. ¿Hay alguna solución?

Gracias

Anonymous · febrero 10, 2013 a las 4:38 pm

wefrferteg

Kchaz Edgar · marzo 19, 2013 a las 4:48 pm

Aplicado y funciona perfectamente, pero estoy trasteando, no quiero las letras en miniatura cursivas… Pero igual, gran aporte.

    Hayder Juvinao · marzo 20, 2013 a las 12:13 am

    A que letras cursivas te refieres?

    Kchaz Edgar · marzo 25, 2013 a las 3:20 am

    Hmmm, la parte de resumen del post, me sale en cursiva además, ¿cómo hago para los que no tienen imagen?, quiero darle un skin a esto pero no sé nada de CSS ni HTML (mi excusa es que la hepatitis no me dejo ir al colegio por dos meses y me lo perdí XD )… Gracias de antemano, seguiré trasteando poco a poco y te cuento.

jarckol Izul · agosto 23, 2013 a las 1:49 am

Ey amigo comparte, el gatgets de los comentarios recientes que tienes en tu blog,, esta rechulooooooooooo,,,

Responder a Kchaz Edgar Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *