Últimos comentarios en blogger

Olvidándonos un poco de seorimícuaro,… Blogger nos da la oportunidad de presentar en la sidebar  los últimos comentarios enviados por los usuarios de nuestro blog, tan solo tienes que agregar un elemento HTML y agregar un script y CSS. El código que comparto a continuación y que implementé en este blog, lo tomé de Vagabundia, solo hay que seguir los pasos que indico para que los puedas implementar. 

Paso 1. Agregamos un nuevo elemento Html-javascript en blogger.



Le colocamos como nombre Últimos comentarios y escribimos el siguiente código.
<script type="text/javascript">
function showrecentcomments(json) {
for(var i=0; i < a_rc; i++) {
var b_rc=json.feed.entry[i];var c_rc;
if(i==json.feed.entry.length)break;
for(var k=0; k < b_rc.link.length; k++) {
if(b_rc.link[k].rel=='alternate') {
c_rc=b_rc.link[k].href;break;
}
}
c_rc=c_rc.replace("#","#comment-");
var d_rc=c_rc.split("#");
d_rc=d_rc[0];
var e_rc=d_rc.split("/");
e_rc=e_rc[5];
e_rc=e_rc.split(".html");
e_rc=e_rc[0];
var f_rc=e_rc.replace(/-/g," ");
f_rc=f_rc.link(d_rc);
var g_rc=b_rc.published.$t;
var h_rc=g_rc.substring(0,4);
var i_rc=g_rc.substring(5,7);
var j_rc=g_rc.substring(8,10);
var k_rc=new Array();
k_rc[1]="Ene"; k_rc[2]="Feb"; k_rc[3]="Mar"; k_rc[4]="Abr";
k_rc[5]="May"; k_rc[6]="Jun"; k_rc[7]="Jul"; k_rc[8]="Ago";
k_rc[9]="Sep"; k_rc[10]="Oct"; k_rc[11]="Nov"; k_rc[12]="Dic";
if("content" in b_rc){
var l_rc=b_rc.content.$t;
} else if("summary" in b_rc) {
var l_rc=b_rc.summary.$t;
} else var l_rc="";
var re=/<\S[^>]*>/g;
l_rc=l_rc.replace(re,"");
if(m_rc==true)document.write(k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');
document.write('<li><b>' + b_rc.author[0].name.$t + '</b>');
if(n_rc==true)document.write(f_rc);
document.write(':<br/>');
document.write('<a href="' + c_rc + '">');
if(l_rc.length < o_rc) {
document.write(l_rc);
} else {
l_rc=l_rc.substring(0,o_rc);
var p_rc=l_rc.lastIndexOf(" ");
l_rc=l_rc.substring(0,p_rc);
document.write(l_rc+'&hellip;');
}
document.write('</a></li>');
}
}
</script>
<script type="text/javascript">
var a_rc=10;
var m_rc=false;
var n_rc=false;
var o_rc=80;
</script>
<script src="http://mibloginblogger.blogspot.com.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Se verá de la siguiente manera



Paso 3. buscamos ]]></b:skin> y pegamos el siguiente código

/*CSS para los últimos comentarios */
#ultimosComentarios li {
/* es el rectángulo que contiene cada item de la lista */
margin: 0px;
padding: 2px;
list-style-image: none;
list-style-position: none;
list-style-type: none;
float: left;
height: 45px;
width: 251px;
text-align:left;
overflow: hidden;
//border-radius:4px;
border: 1px solid #C0C0C0;
line-height: 10px;
}
#ultimosComentarios li:hover {
/* efecto sobre esos rectángulos */
display: block;
background-image: -moz-linear-gradient(#eaf1fa, #073763);
background-image: -webkit-gradient(linear, center top, center bottom, from(#eaf1fa), to#073763));
/*filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#eaf1fa,endColorStr=#073763);&quot;
EndColorStr=&#39;#FF333388&#39;);*/
// border: 1px solid #33F;
/* crome y safari*/
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #2B93D2), color-stop(1, #77BCE6));
background-image:-o-linear-gradient(top, #2B93D2, #77BCE6); /* opera */
}
#ultimosComentarios b {
/* es el nombre del autor del comentario */
font-weight:normal;
font-size: 11px;
list-style-image: none;
list-style-position:none;
list-style-type: none;
color: green;
}
#ultimosComentarios a, #ultimosComentarios a:link, #ultimosComentarios a:visited {
/* el texto del comentario */
font-weight:normal;
font-size: 11px
}
#ultimosComentarios a:hover {
/* efecto sobre el enlace */
color: #000;
outline: none;
text-decoration: none;
font-weight:normal;
}

Paso 3. Expandimos plantilla de artilugios y buscamos el siguiente código

<b:widget id='HTML3' locked='false' title='Ultimos comentarios' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>  </div>

Reemplazamos la parte resaltada por lo siguiente

<div id='ultimosComentarios'><data:content/></div>

Después de aplicar los cambios, el resultado obtenido será el siguiente.


Nos vemos en la próxima seorimícuaro publicación.