Gadget de post (entradas) populares

Cada blog tiene algunos post que tienen un mayor número de visitas que otras entradas, lo que se refleja muchas veces en una mayor cantidad de comentarios.
Hoy veremos cómo agregar un gadget que ayudará a nuestros lectores a tener presente las entradas más populares de nuestro blog.


Este gadget es sencillo de implementar siguiedo los siguientes pasos:

1.§ Vamos a Diseño - Elementos de la página - Añadir un gadget y HTML/Javascript.

2.§ Pegaremos el siguiente código JavaScript:

<div id="Popular">
<script language="JavaScript">
aBold = true;
numposts=200;
maxshowresult=10;
home_page = "http://TUBLOG.blogspot.com/";
</script>
<script type="text/javascript">
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+"</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>

Deberemos de sustituir http://TUBLOG.blogspot.com/ por la URL de nuestro blog. Damos click a Guardar.

3.§ En el código podemos modificar lo siguiente:
» aBold = true; si no queremos que los títulos estén en negrita podemos cambiar true por false.
» numposts=200; es el número de post de donde se saca el promedio de post populares; si tenemos más de 200 post deberemos cambiar este número.
» maxshowresult=10; es el número de post que se mostrarán en el gadget; podemos aumentarlo o disminuirlo.

4.§ También podemos agregar algunos estilos al gadget. Para ello vamos a Diseño - Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin> y encima de éste pegaremos lo siguiente:

#Popular {
/*Estilos para el contenedor */
}
#Popular ul {
/*Estilos para la lista de links */
}
#Popular li {
/*Estilos para cada link de la lista */
}
#Popular a {
/*Estilos para los links */
}
#Popular a:hover {
/*Estilos para los links cuando pasamos el mouse encima*/
}

Dentro de las llaves {} escribiremos el estilo que querramos darle a nuestros enlaces del gadget y damos click a Guardar.

Visto en : Blogger´SPhera