Widget de Posts recientes con imágenes para Blogger
Blogger Publicado por Claudia en febrero 7, 2012
Hay varias versiones de widgets para mostrar los últimos posts el Blogger. Si buscamos “recent posts” en los widgets de Blogger, podremos encontrar dos opciones distintas en inglés; no obstante, hay una versión que tomé de Webaholic y modifiqué muy levemente, y que considero útil de compartir por tres razones: (1) está en español; (2) no tienes que preocuparte del alojamiento del script; y (3) es fácilmente modificable.
Añade el widget
Este widget de posts recientes se añade simplemente copiando el siguiente códígo en un gadget en blanco (Diseño>Añadir un Gadget>HTML/Javascript):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<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 funcione, en la última línea debes reemplazar “TUBLOG” por el nombre de tu blog.
Vista previa del widget

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.
Posts relacionados
Compártelo!
Hay varias versiones de widgets para mostrar los últimos posts el Blogger. Si buscamos “recent posts” en los widgets de Blogger, podremos encontrar dos opciones distintas en inglés; no obstante, hay una versión que tomé de Webaholic y modifiqué muy levemente, y que considero útil de compartir por tres razones: (1) está en español; (2) no tienes que preocuparte del alojamiento del script; y (3) es fácilmente modificable.
Añade el widget
Este widget de posts recientes se añade simplemente copiando el siguiente códígo en un gadget en blanco (Diseño>Añadir un Gadget>HTML/Javascript):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <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 funcione, en la última línea debes reemplazar “TUBLOG” por el nombre de tu blog.
Vista previa del widget

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.

22 Comentarios
Información Bitacoras.com…
Valora en Bitacoras.com: Hay varias versiones de widgets para mostrar los últimos posts el Blogger. Si buscamos “recent posts” en los widgets de Blogger, podremos encontrar dos opciones distintas en inglés; no obstante, hay una versión que tom……
Gostaria de ter no meu blog, tem um porém o meu blog já tem mta coisa instalada. bom artigo
Creo que el widget tiene un problema con las nuevas plantillas de bloguer, pues a mi me saltan los puntos predeterminados que salen con las listas de los enlaces de blogger
Una pregunta chica blogger, se puede dar un estilo diferente al post de las entradas principales, que al de entradas cuando se muestre una Etiqueta X, si se puede como seria???.
Otra Pregunta como puedo poner un formulario de comentario tipo como el tuyo, es que el de blogger no megusta mucho.
Saludes y Gracias de antemano
Muchas Graciias ya lo implemente
Hola ya lo hice y mi gadget en el blog esta invisible no se ve absolutamente nada sólo se ve la llavesita para editar, y puse mi direccion de blog y nada
que puede ser que no funcione? saludos
Zenquiu veri mucho!
Algo así para wordpress?
Voy a buscar
hola … porque no se me alinean hacia un lado por ejemplo a la derecha???
Claudio: cambia la alineación de tu texto. Ej:
/* justificar */
.sidebar {
text-align: justify;
}
o
/* alinear izquierda */
.sidebar {
text-align: left;
}
como le quito el estilo italic? gracias de antemano
hola, queria saber como puedo hacer para configurarlo de tal forma que quede horizontal en vez de vertical. Mi intensión es ponerlo en el comienzo del blog y que figuren por ejemplo:
1 linea: 3 ultimas entradas
2 linea. siguientes entradas
etc
gracias. espero que entiendas
hola claudia, como podria agregar un gadget con los ultimos comentarios pero mostrando avatar de los autores. Existe un gadget oficial o se podria hacer con el feed de los comentarios?
[...] Widget de Posts recientes con imágenes para Blogger [...]
Hola. Antes de nada muchas gracias por tus posts que resultan de mucha ayuda para los aficcionados que andamos “fuchicando” en nuestros blogs. Mi problema es que tengo un blog que se publica automaticamentes desde ifttt.com y el formato en el que se publica no permite encontrar la imagen del post. Estuve buscando en internet y modificando el código pero no logré solucionarlo. Agradecería cualquier indicación que permita al html encontrar imágenes en le post.
Un saludo
Es mi primer comentario gracias fue de gran ayuda ☺☻
buen gusto tienes, es diseño de tu blog es 98% perfecta para no decir perfecta, JUAJUA nos vemos bye
Gracias, muchas gracias!
Lo estoy probando y por ahora se ve muy interesante.
Me queda pendiente una pregunta. En un post con varias imágenes, de qué depende con cual imagen se queda para la miniatura?
Antes de nada gracias por el widget y la estupenda explicacion.
Yo tenía 3 entradas antes de instalar el widget. Luego, tras su instalación generé 2 post más adicionales.
El wifget me muestra el link del titulo de la entrada (navegable) solo con las 3 anteriores a su intalación. Con las nuevas el título no aparece. He revisado el codigo y no encuentro qué es lo que pudiera pasar. Te agradecería una manita!
Gracias
Syllix: Me pasaba lo mismo con un wiget similar que ya trae Blogger, y no entendí nunca por qué. Me imagino que sólo hay que esperar que se actualice… Probaste borrando el caché de tu navegador?