jueves, 22 de julio de 2010

Gadget de Blogger para visualizar las entradas mas populares

Bueno ahí va otro de esos post que a nadie interesa, pero que me cuesta lo mio colocarlo así que por si a alguien pudiera interesarle pues ahí está.

Esta vez explico como colocar en un blog de Blogger un listado de los post mas populares, basándose en el número de comentarios que tiene. Esto puede ser interesante para gente que llegue tarde a un Blog y quiera ver de un vistazo las entradas en las que mas gente ha participado.

Lo primero como siempre ir al diseño del blog y en la sección de Elementos de la página pulsar el enlace de Añadir un gadget en la sección del blog que nos interese. En la lista de gadgets disponibles elegimos el de HTML/Javascript, a día de hoy en la cuarta posición.



En la pantallita que nos sale escribirmos el título que queremos que tenga la sección, por ejemplo "Posts mas comentados" o "Posts mas populares" y en contenido escribimos lo siguiente:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "' ";
var item = "<li class='capital'>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=b44f06614db02fb971b32807b74e330b&url=http%3A%2F%2Ftalvezsipero.blogspot.com&maxresults=8" type="text/javascript"></script>

En el código tendremos que cambiar la url del blog poniendo de la que queramos que se obtengan los datos, y si queremos podemos modificar el numerico que está en negrita para especificar el número de elementos que queremos que aparezca.

Como resultado obtendremos una simple lista de los post con mas comentarios. Si quieres que aparezca el número de comentarios de cada entrada puedes utilizar este otro código:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "' ";
var item = "<li class='capital'>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=40416591673778d8a7e461c11602be15&url=http%3A%2F%2Ftalvezsipero.blogspot.com&maxresults=8" type="text/javascript"></script>

Por defecto la lista de posts aparece en minúsculas, pero he formateado el título para que aparezca la primera letra del título en mayúsculas, si queremos que funcione, deberemos ir a la edición HTML del Blog, buscar el código body{ y antes de él escribir la siguiente sentencia:
li.capital:first-letter {text-transform: uppercase;}
 Por último comentar que hay que tener un poco de control al añadir este tipo de "artefactos" ya que lo que hacen es una consulta a la base de datos interna del Blog, con lo cual pueden ralentizar demasiado el tiempo de carga del Blog.

Cualquier problemica o cosa que queréis que os ayude, haré lo que pueda.

7 comentarios:

  1. Hola guapa! pues sí que controlas de estas cosas, yo ni idea, de hecho veo la letra demasiado grande y me gustaría ver cómo queda más pequeña, tú sabes cómo se hace?
    Me refiero a la letra de los laterales y del post, de esto último supongo que es simplemente al escribirlo elegir un tamaño más pequeño pero de lo otro? un besoo

    ResponderEliminar
  2. Hola Vir, pues para bien o para mal me dedico a leer códigos... puaj

    En la hoja de estilos del blog es donde viene definido el tamaño por defecto de cada sección de la web. Al crear el post si que puedes si quieres hacerlo mas grande, pero no es la solución.

    Mirando el código que genera tu página veo que tienes añadida una plantilla por defecto de Blogger que se llama "Harbor". ¿Sabes cómo poner una plantilla de las que se encuentran por internet? no he escrito nada sobre eso porque tal vez me haya parecido que no era dificil (error que cometemos muchas veces los programadores) pero con ellas puedes cambiar el estilo de tu blog completamente sin apenas hacer nada.

    Bueno, el caso. Que en un blog de pruebas me he puesto este mismo diseño y la letra me aparece por defecto mas pequeño, así que haz una cosa. Ves a la configuración del blog, accede a la pestaña de Diseño y pulsa la opción de Diseñador de plantillas (la última a la derecha).
    En la pantalleja negra que sale puedes seleccionar alguna otra plantilla de blogger si quieres, o si quieres modificar la que ya tienes ve a la sección de Avanzado y por abajo te saldrá la opción de "Fuente del texto", seleccionala y formateala como quieras.

    Si no te sale avisame, que lo solucionaremos de otra manera.

    Perdona por el tostonazo!!

    ResponderEliminar
  3. Muchas gracias! y no ha sido ningún tostón, lo voy a probar ahora mismo, en principio no quiero cambiar la plantilla porque miedo me da que me desaparezcan los laterales..
    Un beso y gracias, luego te cuento

    ResponderEliminar
  4. Lo conseguí!! No te exagero nada si te digo que ayer estuve hora y pico intentándolo, una cosa, si cambio la plantilla pierdo los laterales? contéstame cuando puedas vale sin prisa, o puedo dejar la misma plantilla pero con otro color de fondo? gracias!!

    ResponderEliminar
  5. Pues sí que interesa. No creo que esto no interese. Otra cosa diferente es que se haga o no se haga. Yo personalmente no lo haré, pues considero que ya tengo demasiada información en el blog...
    LO mejor de este post es que ya sé a quién acudir en caso de incendio...

    ResponderEliminar
  6. Vir, he escrito otro post a tu salud :) espero que te resuelva alguna duda, para que puedas hacer las cosas sin miedo, que es como deben hacerse para aprender.

    Amando, Cualquier duda que tengas sobre cosillas de estas pregunta sin miedo, que intentaré ayudarte, además soy buena maña, para cabezona yo.

    ResponderEliminar
  7. Ehh pues a mi si que me interesa :D Lo tendré que poner (cuando tenga monitor y tiempo xD)

    Gracias por tus molestias! :)

    ResponderEliminar

Si aún respiras... demuestramelo