Widget comentarios recientes con avatar

Widget de comentarios recientes con avatar para Blogger

Blogger Publicado por Claudia en Septiembre 24, 2012

Osman había preguntado cómo agregar un gadget con los últimos comentarios pero mostrando avatar de los autores. Hay varios tutoriales al respecto, pero a veces es tedioso e innecesario seguirlos cuando tienes un generador que en menos de treinta segundos añadirá el gadget que necesitas. En Way2Blogging encontré un genial generador para añadir un widget de comentarios recientes a tu blog de Blogger. Aunque está en inglés, es realmente simple de usar, y no necesitarás tocar el código de tu plantilla en absoluto.

Sólo hay dos campos que necesitamos cambiar: Widget title (el título que queramos que lleve nuestro widget) y Blog URL (el enlace a nuestro blog, no el del feed). Los demás pueden quedar tal cual. Por defecto, el wiget mostrará 5 comentarios, con avatares de 60 píxeles de diámetro y con bordes redondeados. Aquellos comentarios de usuarios sin avatar mostrarán la imagen de incógnito de Gravatar, la cual podemos cambiar simplemente modificando el enlace que allí aparece (necesitamos alojarla previamente).
Una vez que hayamos hecho los cambios correspondientes, presionamos el botón “Generate“. A continuación, veremos un botón azul que dice “Add to Blogger“. Hacemos click sobre él, luego en “Añadir artilugio” en la nueva pestaña que se abrirá,  y veremos que el widget se ha agregado a la barra lateral de nuestro blog.
El resultado será el siguiente:

Podemos hacer cambios en el CSS que se ha añadido en el widget, aunque quizás no sea necesario.
Enlace: Generador de comentarios recientes con avatar

Gadget de comentarios recientes en Blogger

18:05  blogger  41 comentarios

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