Blogger: Mostrar entradas populares

Hace poco me preguntaron si conocía algún método para mostrar las entradas mas populares o mas comentadas de nuestro blog. A lo cual respondí que no, pero pronto desarrollaría una. Así que ahora les traigo un método bastante sencillo de usar y muy funcional.

Utiliza el feed del blog para conseguir los datos necesarios, después los almacena en una matriz. Donde los ordena para posteriormente mostrarlas. Así que los pasos para agregar el gadget único son los siguientes:

[1] Entrar en Diseño>Edición HTML>Sin expandir plantillas de artilugios

[2] Después necesitrás agregar despues de cualquier etiqueta del formato:

<b:widget id='XXXXX' locked='XXXXX' title='XXXXXX' type='XXXX' />

El siguiente código:

<b:widget id='HTML101' locked='false' title='Entradas populares' type='HTML'>
<b:includable id='main'>
<!-- gagdet por santyweb.blogspot.com -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<script type='text/javascript'>//<![CDATA[
chk=function(d){document.write(d)};
santyPost = function(u,t,c,b) { this.url = u; this.tit = t; this.comm = c; this.body = b };
var santyAllPosts=[];
santyAllPostsRecopilacion = function (json) {
var total,entrada,i,x,arr,lnk,com,ttle;
total = json.feed.entry.length;
for(i=0; i < total; i++){
entrada=json.feed.entry[i];
for (x=0; x < entrada.link.length; x++){
arr = entrada.link[x];
lnk = (arr.rel=="alternate" ? arr.href : lnk);
if(arr.rel=="replies"){
com = (arr.type=="text/html" ? parseInt(arr.title,10) : com);
}
}
ttle = entrada.title.$t;
txt = ('summary' in entrada ? entrada.summary.$t : entrada.content.$t);
santyAllPosts.push(new santyPost(lnk,ttle,com,txt));
}
santyAllPosts=santyAllPosts.santyOrdenMaxMin();
};
Array.prototype.santyOrdenMaxMin = function(){
var max=0;
var tmp=[];
var x,i,post;
for(i=0; i<this.length; i++){
post=this[i];
max = ( post.comm > max ? post.comm : max);
}
for(x = max; x>=0; x--){
for(i=0; i<this.length; i++){
post=this[i];
if(post.comm == x){
tmp.push(post);
}
}
}
return(tmp);
};
Array.prototype.santyMostrarEntradasPopulares = function(max,txt) { for(var i=0; i<max;i++){ p=this[i]; chk(p.tit.link(p.url)+" ("+p.comm+" comentarios)<p>"+p.body.substring(0,txt)+"</p><br/>");  }};
//]]></script>
<div class='widget-content'>
<data:content/>
<div id='santyEntradasPopulares'>
<script src='http://TUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=santyAllPostsRecopilacion&amp;max-results=999' type='text/javascript'></script>
<script type='text/javascript'>santyAllPosts.santyMostrarEntradasPopulares(10,70);</script>
</div>
</div>
</b:includable>
</b:widget>

Donde el texto color Amarillo, es el url de tu blog claro que sin el "http://" y sin el ".blogspot.com".

Y el primer numero color rojo(10), es el numero de entradas a mostrar. El segundo numero color rojo(70) es el numero de caracteres a mostrar de la entrada.

Para modificar, los selectores CSS serán:

#santyEntradasPopulares {
/* Para el contenedor general */
}
#santyEntradasPopulares div {
/* Para los contenedores individuales */
}
#santyEntradasPopulares div span {
/* Para el texto de las entradas */
}
#santyEntradasPopulares a {
/* Para el titulo de las entradas */
}

Y con eso podrás disfrutar de las entradas mas comentadas de cualquier blog!!

Comentarios, dudas errores compártelos!!