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

Tags:
Compártelo!

22 Comentarios

febrero 7, 2012

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……

Will Santos nobres-will.blogspot.com
febrero 16, 2012

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

David intheriff.com
febrero 17, 2012

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

abril 16, 2012

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

abril 16, 2012

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

toltolo toltolo.blogspot.com
abril 30, 2012

Muchas Graciias ya lo implemente :D

Ady blogsorpresa.blogspot.com
mayo 11, 2012

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

Jose lascosasdejoseykatty.com
mayo 18, 2012

Zenquiu veri mucho!

junio 25, 2012

Algo así para wordpress?

junio 25, 2012

Voy a buscar ;)

julio 3, 2012

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

julio 5, 2012

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

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

o

/* alinear izquierda */

.sidebar {
text-align: left;
}

juan jeithree.blogspot.com
septiembre 8, 2012

como le quito el estilo italic? gracias de antemano

Maximiliano deunaman.blogspot.com
septiembre 13, 2012

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

leiva osmanleiva.com
septiembre 21, 2012

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?

noviembre 5, 2012

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

Renato jr-vilabela.blogspot.com.es
noviembre 17, 2012

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

Di Prieto laweboteca.blogspot.com
noviembre 27, 2012

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

Fernando823 bindack.blogspot.mx
marzo 1, 2013

Gracias, muchas gracias!

piXel solomochila.blogspot.com
marzo 5, 2013

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?

abril 7, 2013

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

Claudia chicablogger.com
abril 7, 2013

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?

Deja tu comentario

Nombre (requerido)
Email (requerido)
Sitio web (opcional)