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.
<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='https://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
no necesitas un gadget html para hacerlo, hay un gadget oficial para blogger que muestra las miniaturas.
Estas en lo cierto pero esta en ingles y es menos personalizable que este amigo :shrug:
EL GADGET DE BLOGGER NO FUNCIONA…ARROJA ERROR
Esto no lo sabia Chilenito, gracias por avisar.
Nada brother, no sale nada, que mal :/
Si agregaste bien el código?
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.. 🙂
Carlos de verdad muchas gracias por tu gran comentario,personas como tu me animan a seguir trabajando en Blogger :]
Interesante Amigo lo probare haber que tal :F
Pruebalo Andres de seguro quedara muy bien en tu blog.
Valla esta bastante bueno me gusto saludos juvinao 🙂
Gracias amigo,pruebalo que esta genial 😀
Acabo de probarlo y va estupendamente, muchas gracias!!!
Tinuwel que bueno que te guste,gracias por comentar.
Gracias por Conpartir. Salu2
Gracias a ti por comentar
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?
Habria que editar el script,por ahora no se me ocurre como rediseñar el script 😕
Gracias Juvinao le quedo bien a mi blog.
Obed que bueno que le haya quedado bien a tu blog,este es un gran gadget..
Saludos amigo.
MUCHAS GRACIAS QUEDO DEL 1
Gracias por comentar 😀
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 ??
Talvez modificando las condicionales,pero creo que ya hay un gadget similar al que pides.
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!!
Genial! ha quedado estupendo 🙂
Gracias por comentar 😎
Gracias, es justo lo que estaba buscando.. personalizable y de fácil instalación.
Saludos..
Sgroya si es muy sencillo y configurable,excelentes cualidades,Saludos 😀 y gracias por comentar
Gracias, me sirvió muchísimo!
Me sirvio muchisimo. Gracias!
Gracias por comentar Fernando 😛
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/
Johao sin duda hay que modificar el CSS,pero mientras logro eso puedes poner en una pagina estatica, asi como yo lo tengo y poner hasta 25 entradas.
http://www.miltrucosblogger.info/p/ultimas-entradas.html
Numpost= 10 y solo muertra 3. Porque será? Me esta volviendo loco!!!! no encuentro la solucion. Ayuda por favor
No entiendo porque te sucede esto 🙁
A mí no me funciona, ayuden por favor. otro código??
perdonen, ya está me equivoqué en algo. Gracias!
Luis que bueno que si te funcione,Saludos
Muchas gracias! Los gadgets de blogger últimas entradas, no sé por qué,ya no funcionan en mi blog. Este sí. ¡gracias!
Carmen gracias por tu comentario 😛
Anda perfecto, ¡gracias! ^_^
Gracias Gabriella por tu comentario.
gracias, me funciono!!! espero contar con su visita, soy nuevo en esto y estoy preparado un blog sobre android!!! Gracias mil….
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
wefrferteg
Aplicado y funciona perfectamente, pero estoy trasteando, no quiero las letras en miniatura cursivas… Pero igual, gran aporte.
A que letras cursivas te refieres?
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.
Ey amigo comparte, el gatgets de los comentarios recientes que tienes en tu blog,, esta rechulooooooooooo,,,