martes, 22 de septiembre de 2009

Blogger: Crear un contador de posts y comentarios.

Con este post pretendo hacer una pequeña introdución a la forma de implementar un sencillo contador de posts y comentarios para Blogger como el que se muestra en la imagen y que podeis contemplar en el propio Blog.

Contador de Posts y comentarios

Para ello, debeis ir a la pestaña de Diseño y añadir un nuevo Gadget de HTML/Javascript, en el cual debereis poner el siguiente código:

<script type="text/javascript"> function
showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script><div style="width:144px; height:114px;
position:relative; font-size:
13px; font:Comics Sans MS, Arial, Verdana, Helvetica,sans-serif;"><span style="position:absolute; top:82px;
right:
102px;"><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><span style="position:absolute; top:82px; right:32px;"><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></span><img src="http://1.bp.blogspot.com/_CGg8TtQoqSg/SqqfqQf7e8I/AAAAAAAAABk/CjH-dxOYFDk/s400/contador.jpg"/></div><span style="font-size:10px">
</span>

 

Este script será configurable en diversos aspectos:

  • Los valores en naranja, indican el tamaño total del cuadro que ocupa la imagen empleada, sólo se deberá modificar si se quiere sustituir la imagen por otra, en cuyo caso,habrá que tener en cuanta tambien los valores en rojo y verde.
  • El valor en color morado hace referencia al tamaño de los números.
  • Los valores en rojo, son las coordenadas en que aparecerán estos números. En este caso estan referenciadas al número de pixeles desde el margen superior de la imagen y desde el lado derecho. Si quisierais cambiar el dibujo por otro, debeis modificarlos para que aparezcan en la zona deseada. Los primeros parámetros (top:78px;right:102px), hacen referencia a los post y los segundos (top:78px; right:32px) a los comentarios. Si modificais el valor Top, haciéndolo más grande, el número bajara, y si lo haceis más pequeño se localizará más arriba. De igual modo si modificais el parámetro Right, aumentándolo, el número se desplazará hacia la izquierda y si lo bajais se situará mas a la derecha.
  • Por último, el parámetro en verde, hace referencia a la localización de la imagen sobre la que aparecerán los números. Si quereis utilizar otra, debereis colgarla en algún hosting de imágenes como http://imageshack.us/ , cambiar la parte en verde por la dirección de vuestra imagen y adaptar las coordenadas, como se comenta en el paso anterior.
Si alguien tiene alguna duda o necesita ayuda, que deje un comentario y se le echará una mano.

5 comentarios:

José dijo...

Y como hago para que se coloque el numero de pñost y comentarios?

Miguel. dijo...

Saludos Jose he estado echando un vistazo a tu blog. Prueba a cambiar los valores

top:82px; right:102px
por
top:80px;right:100px

top:82px; right:32px
por
top:80px; right:30px

Si hiciera falta desplazarlos mas, reduce mas los valores.

Un saludo y no dudes en preguntar

Vir dijo...

hola!
intenté ponerlo y me da correctamente el número de post no así el de comentarios, creo que toma los comentarios de 2010 y no de la totalidad del blog... Puede solucionarse?
te paso el link http://nenacuidadoalcruzar.blogspot.com
desde ya muchas gracias!
vir de Cuidado al cruzar!

Patricia O. (Patokata) dijo...

Buenísimo, quedó super en mis blogs!!!

saludos!!

Miguel. dijo...

Me alegro de que te haya gustado Patricia, suerte con tus blogs.

Un saludo y gracias por la visita.