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!
24 Comentarios en Widget de Posts recientes con imágenes para Blogger
  1. 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……

  2. Will Santos dice:

    Gostaria de ter no meu blog, tem um porém o meu blog já tem mta coisa instalada. bom artigo

  3. David dice:

    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 :(

  4. Diakchimba dice:

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

  5. Diakchimba dice:

    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

  6. toltolo dice:

    Muchas Graciias ya lo implemente :D

  7. Ady dice:

    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

  8. Jose dice:

    Zenquiu veri mucho!

  9. Jorge dice:

    Algo así para wordpress?

  10. claudio dice:

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

  11. Claudia dice:

    Claudio: cambia la alineación de tu texto. Ej:

    /* justificar */
    .sidebar {
    text-align: justify;
    }

    o

    /* alinear izquierda */

    .sidebar {
    text-align: left;
    }

  12. juan dice:

    como le quito el estilo italic? gracias de antemano

  13. Maximiliano dice:

    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

  14. leiva dice:

    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?

  15. [...] Widget de Posts recientes con imágenes para Blogger [...]

  16. Renato dice:

    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

  17. Di Prieto dice:

    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

  18. Fernando823 dice:

    Gracias, muchas gracias!

  19. piXel dice:

    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?

  20. Syllix dice:

    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

  21. Claudia dice:

    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?

  22. willian dice:

    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!

  23. Recetas dice:

    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

Deja tu comentario
Tu Comentario