Gadget de comentarios recientes en Blogger (l)


A los Bloggers que leen esta nota hoy les enseñaré de forma sencilla como poner el gadget de últimos comentarios en nuestros blogs, su visualización en el blog quedará así:


 Interesante!... Para insertar este Gadget en nuestro blog vamos a Diseño > Añadir un Gadget > HTML/JavaScript allí pegaremos el siguiente código:


<style type="text/css">
ul.latest_recent_comments{list-style:none;margin:0;padding:0}
.latest_recent_comments li{position: relative;background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none}
.latest_recent_comments li a{float:right;width:250px;font-size:12px;font-family:Arial;color:#888;background:#2c2c2c;margin-top:9px;padding:10px 7px 5px;border:1px solid #161616;border-right:3px solid #5390ad}
.latest_recent_comments li a:hover{color:#fff !important}
.latest_recent_comments li a:hover{color:#5390ad;background:#2c2c2c}
.latest_recent_comments li .avatarImage{float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{width:34px;height:34px}
.latest_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block}
.latest_recent_comments li span{position: absolute;left:42px;padding:1px 3px;color:#8f887c;background:#444;display:block;font-size:12px;line-height:1.4}
.latest_recent_comments span{display:none}
</style>
<script type='text/javascript'>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 z=z||5,2=2||1E,p=p||18,7=7||"17://14.13.6/-11-V/U-1y/1t/1b/12/10.w",x=x||" X &1d;",k="l"===m k?!0:k,n="l"===m n?!1:n,9="l"===m 9?!0:9,K="l"===m K?!1:9;16 M(h){8 c;c=\'<E B="M">\';A(8 e=0;e<z;e++){8 f,g,a,d;15(e==h.F.G.o)1c;c+="<H>";8 b=h.F.G[e];A(d=0;d<b.r.o;d++)"S"==b.r[d].T&&(f=b.r[d].y);A(d=0;d<b.v.o;d++)g=b.v[d].W.$t,a=b.v[d].Y$Z.I;-1!=a.3("/J/")?a=a.q("/J/","/s"+2+"-c/"):-1!=a.3("/D/")?a=a.q("/D/","/s"+2+"-c/"):-1!=a.3("/L-c/")&&0!=a.3("j:")?a="j:"+a.q("/L-c/","/s"+2+"-c/"):-1!=a.3("u.6/i/1a-N.C")?a="j://1.O.P.6/-1e/1f/1g/1h-1i/s"+2+"/1j.w":-1!=a.3("u.6/i/1k-N.C")?a="j://4.O.P.6/-1l/1m/1n/1o/s"+2+"/1p.w":-1!=a.3("u.6/i/1q.C")&&(a=-1!=7.3("1r.6")?7+"&s="+2:7);!0==k&&(d=!0==9?"1s":"",c+=\'<Q B="1u \'+d+\'"><i B="\'+d+\'" I="\'+a+\'" 1v="\'+g+\'" 1w="\'+2+\'" 1x="\'+2+\'"/></Q>\');c+="<R>"+g+"</R>";b=b.1z.$t.q(/(<([^>]+)>)/1A,"");""!=b&&b.o>p&&(b=b.1B(0,p),b+="&1C;",!0==n&&(b+=\'<a y="\'+f+\'">\'+x+"</a>"));c+=\'<a y="\'+f+\'">\'+b+"</a>";c+="</H>"}c+="</E>";1D.19(c)};',62,103,'||avatarSize|indexOf|||com|defaultAvatar|var|roundAvatar|||||||||img|http|showAvatar|undefined|typeof|showMorelink|length|characters|replace|link|||blogblog|author|png|moreLinktext|href|numComments|for|class|gif|s220|ul|feed|entry|li|src|s1600|hideCredits|s512|latest_recent_comments|rounded|bp|blogspot|div|span|alternate|rel|UPb7SL|32nw|name|More|gd|image|personal|5YeC_6|s80|googleusercontent|lh5|if|function|https|40|write|b16|QJRpUV7G9bc|break|raquo|NAMZejK41So|T0evV0_SSUI|AAAAAAAACso|ol6|PKkZipA|md_blogger_logo|openid16|k0U7v1WpNRs|T0euKMHQi_I|AAAAAAAACsg|DNqzinhvxt4|md_openid_logo|blank|gravatar|avatarRound|AAAAAAAABWE|avatarImage|alt|width|height|uGXI|content|ig|substring|hellip|document|34'.split('|'),0,{}))
</script>
<script type="text/javascript" src="http://NOMBRETUBLOG.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>

Ahora simplemente reemplazamos en el código lo que está en naranja por la URL de nuestro blog, y procedemos a guardar, muy simple.

Si presentan dudas pueden comentar...

47 comentarios:

  1. Respuestas
    1. Hola Michelle Wilhelm Acutain Lamento el error ya fue corregido por unon mejor con Script directamente y no alojado en otra parte.... :D

      Saludos,

      Borrar
  2. Saludos Andres.. una pregunta este gadget se podria personalizar un poco mas?.. de antemano gracias !!!!!

    ResponderBorrar
    Respuestas
    1. Hola Joral Gom Qué tal, claro que sí se puede personalizar trabaja un poco en los estilos CSS si lo sabes manejar te quedará fácil para que cambies colores, fondos, letra efectosm hover entre otros.... No es necesario que muevas el JS

      Saludos,

      Borrar
  3. Muchisimas gracias amigo, pero personalmente me gustaria un poco más "junto" ya que por las separaciones que tiene me ocupa mucho espacio =P te agradeceria si pudieras ayudarme.

    ResponderBorrar
    Respuestas
    1. Hola Erick Santiago Claro bueno para reducir espacios en cada comentario trabaja con el código omitiendo esta parte:

      !important;margin:0 0 6px !important;padding:0 0 6px

      Se encuentra en las primeras líneas, lo puedes borrar o dejar en cero cada número así se recucen un poco...

      Saludos,

      Borrar
  4. Hola! Muy interesante este tutorial!
    Gracias por compartirlo!
    Quiera pedirte tu apoyo, es posible!
    ¿Qué hay de seguirse unos a otros? ..porfisss, me brindas tu apoyo ♥ ?
    Ya sigo tu blog como Tutos Briiz. Esperando por ti ♥
    Aqui mi enlace: Comparte con Briiz©
    Gracias anticipadas!

    ResponderBorrar
  5. Hola, antes que nada agradecerte el artículo, me ha sido muy útil ya que llevaba unos días con problemas en mi anterior gadget de últimos comentarios.

    Soy bastante torpe con esto del diseño (no tengo gusto ninguno) y tengo un blog de artículos de opinión sobre Ajedrez, donde un buen gadget de últimos comentarios es muy importante, dentro de mis cortos conocimientos he retocado en la medida de lo posible el código, para más o menos dejarlo como me gustaba, pero tengo algún problema que no consigo subsanar, ¿me podrías ayudar?

    Te cuento, bueno, antes que nada mi blog es http://ajedrezporandaluz.blogspot.com.es/ ;)

    Me gustaría intentar cambiar sólo dos cosas:
    1) El nombre del autor del comentario se viese en negrita (realmente esto, si es muy engorroso me da un poco igual)
    2) Que la imagen del avatar se viese más grande (he intentado con los px, de 34 a 100 que están en el código pero no se cambia...)

    ¿Sería posible? ¡MIL GRACIAS!

    P.D: Cualquier consejo, ayuda, gadget o similar para mejorar la estética del blog se agradecerá :)

    ResponderBorrar
    Respuestas
    1. Hola Miguel Alvarez Morales , Gracias por comentar el artículo así de pasada en este momento no puede responderte todas tus dudas detalladamente, pero, haré un post para lo primero que se puede para identificar quien es el autor del sitio en los comentarios..... Lo demás miraré si te lo respondo por acá ¡Pendiente!

      Saludos,

      Borrar
  6. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  7. ayuda plz cuando comento en anonymo sale una imagen de un triangulo con un signo de admiracion en medio me podrias decir como cambiarlo

    ResponderBorrar
    Respuestas
    1. Hola JcDuranM son muchas cosas las que tienen que ver con ello para ello te recomendamos que reestablezcas tu perfil de blogger o Google en general a sus valores generales o por defecto.

      Saludos,

      Borrar
  8. Como se puede cambiar el color a blanco??

    ResponderBorrar
    Respuestas
    1. Hola Victor Quesada Aquí en esta línea con colores hexadecimales podrás cambiar los elementos que buscas..

      ;background:#2c2c2c;

      Saludos,

      Borrar
  9. Estan muy feos, en mi blog quedaron horribles, parece que heredaron los datos del entorno y no encajan esteticamente

    ResponderBorrar
    Respuestas
    1. Pues habrìa que trabajar un poco el modelado CSS de la caja de comentarios jaja porque bueno no està del mejor lujo... Lo admito sin embargo es ùtil y funcional con un poco de conocimiento de CSS sale.....

      Saludos,

      Borrar
  10. no me funciona
    mi blog es UNIVERSO DE LUZ

    ResponderBorrar
  11. Hola Andrès, espero te encuentres activo en tu blog
    Tenia un Gadget que dejo de funcionar en mi Blog al
    igual que mis emoticones en estos meses. En realidad
    no se cual es el problema, quizás por el cambio del http

    Se pudo solucionar lo de colocar imágenes, pero lo otro no.
    Fue así que llegue a tu Blog, en busca de una de la soluciones
    Por suerte tu Gadget de Comentarios Recientes funciona en mi Blog
    Mi pregunta es si muestra los últimos comentarios o solo
    al azar son lo que te muestra? Esto ultimo es lo que me pasa y no
    puedo saber si dejaron uno nuevo.
    Espero puedas aclararme la duda. Gracias

    ResponderBorrar
    Respuestas
    1. Hola Dasha Fide Tienees tu blog con Https ? de ser así este protocolo no deja que tu blog en general y diseño sea compatible con algunos códigos o gadgets la razón no la sé exactamente, y respecto si es al azar o recientes es un feed en el script el que llamamos, es decir, que los muestra recientes ¿cómo lo comprobé? ingresé a los comentarios de bloggin Red recientes llamandolo desde aquí:

      http://www.blogginred.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5

      Que la la parte del código de este post que dice poner el nombre de tu blog en el enlace busqué uno a uno comparando con los de escritorio de comentarios y efectivamente coinciden, así que no son al azar son recientes.

      Saludos,

      Borrar
  12. Hola Andrés, gracias por tu respuesta.
    No aun no puse en Https mi Blog. Se que es para
    seguridad del mismo. Pero mi Blog no es tan importante
    como el tuyo,Solo lo uso para publicar música.

    Tenes Razón ahora estuve viendo tu Gadget y si es como
    tu lo mencionas, me confundió el que Yo tengo en los comentarios
    respuestas con diferente fecha.
    Si sabes algo sobre colocar los Emoticones. Me lo haces saber.

    Voy a colocar el Link de tu Blog en mi Blog de Música para seguirte.

    Gracias por tu ayuda . Saludos

    ResponderBorrar
    Respuestas
    1. Hola de nuevo :), Comprendo me alegra entiendas la solución a tu problema, estaré intentando realizar con tiempo un POST sobre emoticones en blogger... Está pendiente, muchas gracias.

      Y Saludos,

      Borrar
  13. Hola!!
    Muchas gracias por el tutorial, me ha funcionado a la primera. Sólo quería pedirte un favor, sería posible quitarle ese color negro al fondo del comentario? No me gusta como queda en mi blog. Prefería que fuera de color blanco. Te estaría muy agradecida. Saludos!!

    ResponderBorrar
    Respuestas
    1. Hola, claro modifica el código que hay con el # lo siguiente:

      background:#2c2c2c;

      Para seleccionar un color puedes ir al menú verde que tenemos en herramientas y colores HTML...

      Saludos,

      Borrar
  14. Muy útil este gadget. Os invito a mi blog cuando quieran encontrar algo diferente. Saludos desde Venezuela :).

    ResponderBorrar
  15. Muy buen tutorial...se agradece.
    Muchas gracias!

    ResponderBorrar
  16. Saludos Andres ... Nuevamente visitandote por aca ... el gaget de comentarios funciona bien lo que no funciona ahora es la imagen del avatar de los anonimos.. me sale es un triangulo.... habra forma de corregirlo o poner al menos algo en vez del triangulo...?? de antemano muchas gracias

    ResponderBorrar
    Respuestas
    1. Hola Joral no comprendo muy bien lo del triángulo por favor muestrame una imagen pega el link de la imagen para ver bien que sucede...

      Saludos,

      Borrar
  17. Hola, estupendo gadget. Podrías decirme cómo cambiar el número de comentarios a mostrar, si es que se puede hacer? gracias y saludos

    ResponderBorrar
    Respuestas
    1. Hola Francisco M. Al final del código verás algo así:

      recent_comments&max-results=5

      Cambia sólo el número 5 por la cantidad que desees mostrar y que no desencaje con los demás parámetros de CSS cualquier cosa vuelve y cuenta.

      Saludos,

      Borrar
  18. Es genial! me encanta. Habia buscado mucho y ninguno me gustaba.
    El tuyo es estupendo.
    Gracias!

    ResponderBorrar
    Respuestas
    1. Hola gracias por tu comentario saludos no olvides seguir el blog saludos.

      Borrar

ESTAMOS EN: