jueves, 3 de octubre de 2013

Gadget de Estadísticas para Blogger

10/03/2013 10:31:00 a. m. Por 8 comentarios


El gadget que veremos hoy se trata de un bloque en el que se muestran estadísticas de nuestro blog, tales como los días en línea que lleva publicado, el número de entradas y el número de comentarios. Podéis verlo en la parte inferior de mi blog, y publico su código a petición de los lectores.

Nota: El contador de visitas que aparece debajo de las estadísticas es el de Blogger. Podéis encontrarlo en la lista de gadget que nos ofrece Blogger

Cómo instalar el gadget en tu blog


Para añadir este gadget a tu blog tendremos que seguir los siguientes pasos:

Para añadir el estilo a la plantilla:

  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.
  4. En el código buscamos lo siguiente:
  5. ]] ></b:skin>

  6. Encima de ello tenemos que pegar el siguiente código:
***---Estaditicas---***
.stats-data {
clear: both;
display: block;
float: none;
overflow: hidden;
padding-left: 8px !important;
}
.stats-data li {
border-right: 1px solid #CCCCCC;
color: #ffffff;
float: left;
font-size: 10px;
font-weight: normal;
line-height: 12px;
margin-right: 10px !important;
margin-top: 0 !important;
padding: 5px 15px 2px 0 !important;
text-align: left;
}
.stats-data li span {
color: #ffffff;
display: block;
font-size: 15px;
font-weight: bold;
margin-bottom: 2px;
}

En el código anterior podemos modificar el estilo del gadget a nuestro gusto, pero las líneas de código a modificar más importantes son:

  •        Grosor del separador (en pixeles)
  •        Color del separador (código hexadecimal)
  •        Color del texto (código hexadecimal) (Por defecto: Blanco)
Para agregar el gadget al blog:


  1. En el Escritorio Blogger hacemos clic en Diseño.
  2. Hacemos clic en Añadir un Gadget donde queramos poner los anuncios.
  3. En la lista seleccionamos HTML / JavaScript.

    HTML JavaScript

  4. En él pegamos el siguiente código:

<ul class="stats-data">
<li>
<span><script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(15, 07, 2013, "" );</script> </span>Días en línea
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script></li>
<li>
<span><script src="http://zblogger.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script></span>Entradas
</li>
<li style="border-right:0 none; padding-right:0!important;">
<span><script src="http://zblogger.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script></span>Comentarios
</li>
</ul>

El el código anterior hay que modificar:
  •        URL de tu blog.
  •        Fecha en la que se creó el blog.
Ahora tan solo poned el gadget donde más os guste y comprobad que todos los datos son correctos.