Mil Trucos Blogger

Gadget de Posts recientes con imágenes para Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

50 Comentarios

  1. Mayo 8, 2012    

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

    • Mayo 8, 2012    

      Estas en lo cierto pero esta en ingles y es menos personalizable que este amigo :shrug:

    • Diciembre 9, 2012    

      EL GADGET DE BLOGGER NO FUNCIONA…ARROJA ERROR

    • Diciembre 13, 2012    

      Esto no lo sabia Chilenito, gracias por avisar.

    • Junio 5, 2014    

      Nada brother, no sale nada, que mal :/

    • Junio 8, 2014    

      Si agregaste bien el código?

  2. Mayo 8, 2012    

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

    • Mayo 9, 2012    

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

  3. Mayo 9, 2012    

    Interesante Amigo lo probare haber que tal :F

    • Mayo 10, 2012    

      Pruebalo Andres de seguro quedara muy bien en tu blog.

  4. Anonymous Anonymous
    Mayo 10, 2012    

    Valla esta bastante bueno me gusto saludos juvinao 🙂

    • Mayo 10, 2012    

      Gracias amigo,pruebalo que esta genial 😀

  5. Mayo 10, 2012    

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

    • Mayo 10, 2012    

      Tinuwel que bueno que te guste,gracias por comentar.

  6. Anonymous Anonymous
    Mayo 10, 2012    

    Gracias por Conpartir. Salu2

    • Mayo 11, 2012    

      Gracias a ti por comentar

  7. Mayo 21, 2012    

    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?

    • Junio 1, 2012    

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

  8. Mayo 31, 2012    

    Gracias Juvinao le quedo bien a mi blog.

    • Junio 1, 2012    

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

      Saludos amigo.

  9. Junio 23, 2012    

    MUCHAS GRACIAS QUEDO DEL 1

    • Junio 24, 2012    

      Gracias por comentar 😀

  10. Junio 27, 2012    

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

    • Junio 28, 2012    

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

  11. Junio 29, 2012    

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

  12. Agosto 25, 2012    

    Genial! ha quedado estupendo 🙂

    • Agosto 25, 2012    

      Gracias por comentar 😎

  13. Septiembre 23, 2012    

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

    • Septiembre 23, 2012    

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

  14. Octubre 8, 2012    

    Gracias, me sirvió muchísimo!

  15. Octubre 8, 2012    

    Me sirvio muchisimo. Gracias!

    • Octubre 9, 2012    

      Gracias por comentar Fernando 😛

  16. Octubre 30, 2012    

    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/

  17. Anonymous Anonymous
    Noviembre 1, 2012    

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

    • Noviembre 20, 2012    

      No entiendo porque te sucede esto 🙁

  18. Noviembre 13, 2012    

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

  19. Noviembre 13, 2012    

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

    • Noviembre 20, 2012    

      Luis que bueno que si te funcione,Saludos

  20. Carmen Carmen
    Diciembre 5, 2012    

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

  21. Diciembre 7, 2012    

    Anda perfecto, ¡gracias! ^_^

  22. Diciembre 17, 2012    

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

  23. Diciembre 23, 2012    

    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

  24. Anonymous Anonymous
    Febrero 10, 2013    

    wefrferteg

  25. Marzo 19, 2013    

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

    • Marzo 20, 2013    

      A que letras cursivas te refieres?

    • Marzo 25, 2013    

      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.

  26. Agosto 23, 2013    

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

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo