Gadget de estadísticas para Blogger

En este tutorial, que nos trae tutoriales-blogger.info, veremos como agregar un pequeño gadget que muestre estadísticas en nuestro blogger. Este articulo se implementa en el sidebar donde se mostrará los días en linea, las entradas creadas y los comentarios realizados.

La demostración se encuentra en este mismo Blog.

COMENCEMOS:

Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML.

Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS

***---Estaditicas By Tutoriales-Blogger.info---***
.stats-data {
clear: both;
display: block;
float: none;
overflow: hidden;
padding-left: 8px !important;
}
.stats-data li {
border-right: 1px solid #CCCCCC;
color: #999999;
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: #333333;
display: block;
font-size: 15px;
font-weight: bold;
margin-bottom: 2px;
}

Paso 4: Guardamos los cambios realizados en la plantilla.

AHORA AGREGAREMOS NUESTRAS ESTADÍSTICAS EN UN GADGET; PARA ELLO SEGUIMOS ESTOS PASOS
Paso 5: Vamos a Blogger>>Diseño>>Añadir un Gadget>>HTML/Javascript.

Paso 6: Dentro del gadget pegamos el siguiente código HTML

<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(24, 11, 2012, "" );</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://tudireccion.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://tudireccion.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script></span>Comentarios
</li>
</ul>

Paso 7: Del código sólo cambiamos las direcciones que se encuentran en rojo por nuestra propia dirección. Y en cuanto a los números 24, 11, 2012, los cambiamos por la fecha en que fue creado nuestro blog. Y listo, guardamos nuestro gadget

¿Qué te parece?

Comparte:

Tweet