Gadget para mostrar las entradas mas populares de una etiqueta

Hace algún tiempo vimos como poner las entradas más comentadas o populares del blog. Dicho script nos permite mostrar una lista general con los títulos de aquellos posts que abunden en comentarios.

Modificando el script y optando por no utilizar las Pipes de Yahoo esta vez (algo que solía influir en la carga del blog) conseguí un resultado bastante prometedor ya que este nuevo gadget no solo posee la característica de mostrar las entradas populares de una bitácora sino que muestra los artículos más comentados de una o más (según como se configure) etiquetas.

Te dejo una imagen de ejemplo para que compruebes la apariencia de este novedoso complemento:

Diseño>añadir gadget (elemento de página)>html-javascript

Añade lo siguiente en su interior:

<div id="blCategorJTPope">
<script language='javascript'>
blJDireccion = "BLOG";
bletiqueta = "ETIQUETA1";
bletiqueta = "ETIQUETA2";
blNumeroPostFilt=180;
blCantidadJTPost=8;
JTBe = false;
</script>
<style type="text/css">
<!--
#blCategorJTPope a {
background: url("URL FLECHA") no-repeat scroll left 3px transparent;
color: #4A5C96;
font-family: Arial;
font-size: 13px;
line-height: 22px;
padding-left: 14px;
text-decoration: none;
}
#blCategorJTPope a:hover{
text-decoration: none;
color: #CC2200;
}
-->
</style>
<!-- No modificar a partir de aqui -->
<script type='text/javascript'>
var blJJTe2=new Array();var blJJTe4=new Array();var blJJTe1=new Array();var blJJTe3;function showrecentposts(j){var a=j.feed.entry.length;blJJTe3=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=(JTBe)?"<b>"+c+"</b>":c;blJJTe2.push(c);blJJTe4.push(g);blJJTe1.push(b)}sortPosts();for(var f=0;f<blCantidadJTPost;f++){var e='<a href="'+blJJTe4[f]+'" class="recent-link">'+blJJTe2[f]+"</a><br/>";document.write(e)};document.write('<br/><a style="background:none;font-size:80%" href="http://goo.gl/4xVx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibc4a2SS6Nj6pV_4T4P19OX5QO8Cuc_4tl6BlGGimsRzXj8iIFUG4Q1LmRjnwFh86nxQbHAz6oHNGAu-xU0c49Y6TUjvSE3eLjYV2WPyT495a-_lfUGY7nDs1YD5PQeJ8bBglAxGYPtYs/s320/varPost2.png"/></a>')}function sortPosts(){function c(d,f){var e=blJJTe2[d];blJJTe2[d]=blJJTe2[f];blJJTe2[f]=e;var e=blJJTe4[d];blJJTe4[d]=blJJTe4[f];blJJTe4[f]=e;var e=blJJTe1[d];blJJTe1[d]=blJJTe1[f];blJJTe1[f]=e}for(var b=0;b<blJJTe2.length-1;b++){for(var a=b+1;a<blJJTe2.length;a++){if(parseInt(blJJTe1[b])<parseInt(blJJTe1[a])){c(b,a)}}}}document.write('<script src="'+blJDireccion+"feeds/posts/default/-/"+bletiqueta+"?max-results="+blNumeroPostFilt+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>')</script>
</div><!-- Fin EtiquetasPopular -->

Escribe la dirección de tu blog en donde dice BLOG y las etiquetas seleccionadas en ETIQUETA1 y ETIQUETA2. Es fundamental que las escribas tal y como aparecen en tu blog (con mayúsculas, minúsculas, tildes...).

Puedes modificar la cantidad de títulos que llevará la lista aumqnetando o disminuyendo la cifra 8 de la línea blCantidadJTPost=8;.

El número 180 de la línea blNumeroPostFilt=180; representa a la cantidad de entradas que se filtrarán al mostrarse. Si editas la cifra, tu lista se creará a partir de las últimas 180 entradas publicadas.

Al utilizar dos etiquetas en el script, la lista estará formada por las entradas populares publicadas bajo alguna de las dos (se mezclarán). Puedes añadir más etiquetas a tu lista agregando líneas como esta:

bletiqueta = "ETIQUETA2";

Recuerda que siempre debes hacerlo antes de blNumeroPostFilt=200;.

Si por cualquier caso prefieres no mezclar tus posts populares y crear listas con etiquetas distintas individualmente lo único que necesitas es borrar la línea bletiqueta = "ETIQUETA2"; y añadir nuevos gadget html-javascript con un único tag.

Personalizar el gadget

Puedes editar tanto el tipo de fuente como el tamaño del texto, su color y el color al pasar el puntero o cursor por encima.

color: #4A5C96; Indica el color de los títulos.
color: #CC2200; Indica el color de los títulos al pasar el cursor.

Haz uso de la tabla de colores para conseguir el código de tus tonalidades favoritas.

font-family: Arial; Indica la fuente de texto a utilizar (Reemplaza Arial por Comic Sans MS por ejemplo).
font-size: 13px; Indica el tamaño del texto (aumenta o disminuye la cifra 13 para editarlo).
padding-left: 14px; Representa el espacio entre la imagen o flechita y el comienzo del título (edita la cifra 14 a tu gusto).

Reemplaza URL FLECHA por la dirección del icono a mostrar junto a cada título. Si deseas hacer uso de la imagen que aparece en el ejemplo utiliza esta URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgYldjARZtCthYQU0h_uc1gh8Sw8dMF15SF2-trlumnQfU671huehJldiil7uKCGFVnnokmhDbTvH-Q-uiofhZEBj0SlI3ipU7RWDrc5OSwh1IhvdCiqS5i1WrSpeQnACN3_Hr5HFCJZY/s400/bflecclJJt.png

Guarda el gadget para terminar.