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.
Tags:
Compártelo!
  • Pingback: Bitacoras.com()

  • 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 🙁

  • Diakchimba

    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???.

  • Diakchimba

    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 😀

  • Ady

    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!

  • Jorge

    Algo así para wordpress?

    • Claudia

      Voy a buscar 😉

  • claudio

    hola … porque no se me alinean hacia un lado por ejemplo a la derecha???

  • Claudia

    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?

  • Pingback: Widget de comentarios recientes con avatar para Blogger - Adnan.es()

  • 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?

  • Syllix

    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?

  • Hola que tal me gusta mucho tu web, Bueno quisiera saber si las imagenes pueden salir en forma normal sin recortarla me refiero al S72-C que sale en la url de la imagen ya que la original es S1600 quisiera ver si me puedes ayudar gracias!

  • Hola amiga, yo actualmente tengo un blog de recetas y quiero darle un toque a los colores, ¿como lo hago?
    espero y me ayudes, y gracias por el aporte.

    este es mi blog http://5recetas.blogspot.com lo colores son un poco llamativos

  • Muchisimas gracias hace dias buccaba al go así porque el original del blog me da problemas, estoy muy agradecido, muchas gracias.Ah y te dejo mi bloog http://www.xhuevos.blogspot.com por si te interesa algo de él, que seguro que si. Repito, muchas gracias.

  • Perdona, ahora que pude responderte, hay una pequeña nota que decirte, y es que para responderte el agradecimiento hacia ti, donde tengo que poner el nombre y una direccion de correo, tengo que adivinar donde ponerlo porque no me indicas como, pero por fin he podido darte las gracias.

  • Pingback: Gadget de Posts recientes con imágenes para Blogger | Mil Trucos Blogger()

  • Peregrino

    Funciona… o al menos en mi blog de prueba XD … pero dime, ¿Es posible hacer que la miniatura se vea en… otra figura geométrica? Un círculo, por ejemplo, en vez de un cuadro… ¿Sí?

  • HORACIO

    A MI ME QUEDO FANTASTICO MUCHAS GRACIAS ., SOLO UNA CONSULTA DONDE SE MODIFICA PARA QUE LA FOTITO SEA UN POCO MAS GRANDE.? THANKS AMIGO.

  • William Wallace

    Y como puedo hacer para que en vez de ir uno debajo del otro se distribuyan por columnas?