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.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-OJIZgAp9aRWwufBF-oGMrlS3HlNISq4C1g4wXefWeTJFKkgEHrPy5e1hyphenhyphene7O3kaZZrbCrP3DVLLHdYWtskSLPF2O1ip2AEgZuMgeovVsnFNHppxOeFru5dROHE-o3ckW1mTza61rm8c/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.