25 junio 2013

Dar estilo al gadget de Estadísticas de Blogger


Hoy os muestro la forma de modificar un poco el gadget de estadísticas de Blogger. El que lo tiene instalado observará que es un poco simple en su diseño, pero hoy vamos a cambiarlo por completo. Vamos a añadirle las entradas y comentarios totales que disponemos en nuestro blog.

El ejemplo lo podéis observar al final de mi sidebar.
Instalación:
1.- Si lo tienes instalado, salta este paso.
2.- Instalar gadget: panel de control - seleccione "Diseño"
3.- Añadir un gadget -> Seleccionar "Estadísticas del Blog"
estadisticas de blogger
 Lo colocamos así y guardamos:

4.- Ahora entramos en Plantilla -> Seleccionamos Editar HTML
5.- Buscamos ]]></b:skin>
6.- A continuación y justamente antes colocamos el siguiente código CSS:

#Stats1 ul{margin:0px 0;border:0;padding:0;}
#Stats1 li{display:inline;width:28%;margin:0;border:0;background:#F5F5F5;float:left;padding:5px 7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none;text-align:center}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#535252;text-shadow:none;text-align:center}
#Stats1 span{font-size:12px;color:#535252;text-shadow:none;}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px;}

Puedes cambiar el fondo en  background , el color de la fuente de los números en  color y el color de las letras en color  para que coincida con el diseño de tu plantilla.
Para obtener el código de color, consulte la tabla de colores

7.- Ahora buscamos <b:widget id='Stats1' locked='false' title='Estadísticas' type='Stats'> lo expandimos, y eliminamos desde
<b:widget id='Stats1' locked='false' title='Estadísticas' type='Stats'>
..
..
..
..
</b:widget>

y en su lugar añadimos el siguiente código:

<b:widget id='Stats1' locked='false' title='Estadísticas' type='Stats'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<li>
<h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
<span>Entradas</span>
</li>
<li id='totalComments'>
<h4 id='Stats1_totalComments'>&amp;hellip;</h4>
<span>Comentarios</span>
</li>
<li id='totalCount'>
<h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
<span>Páginas Vistas</span>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\">&lt\;/script>');
//]]>
</script>
</div>
</b:includable>
</b:widget>

Guarde la plantilla y vea el resultado de su blog.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

18 comentarios

Muy buenas

¿ Como podria hacer para ampliar la caja de paginas vistas?

Tengo más de 3 millones de paginas vistas y como no entra solo muestra puntos suspensivos.

Un saludo y gracias de antemano

Si esto una parte pero me gustaria. Enumerar las entradas del cero tantas que se publiques. Si es posible si no nada ..perdona por molestarte Asi de seguido ....un saludo.

David, exactamente no sé a que te refieres.

no se si me esplico muy bien .....
counter-reset:
}
.blog-posts
counter(contarposts,decimal);
no logro enumerar cada entrada . sera posible eso ?

David, sigo sin enterderte, ¿a que te refieres concretamente?¿Serán los comentarios?

Me ha encantado el tutorial, a ver si tengo un ratillo para instalarlo en mi blog! Hace unos días vi un widget parecido pero con redes sociales (En esta web http://leynuit.com/) ¿Podrías hacer un tutorial? Se ve chulisimo!!!
Gracias!!

Blueli, hace tiempo que lo publiqué, no se si es lo que esperas pero puedes verlo aquí

Lo instalé en mi blog pero no me salió la caja, ¿Qué puede estar pasando?

Si no, habría que jugar con esta parte del código: #Stats1 li{display:inline;width:28%;margin:0;border:0;background:#F5F5F5;float:left;padding:5px 7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none;text-align:center}

Reduciendo lo marcado en negrita :
12 a 10
28 a 24
7 a 2
Esto sería un ejemplo.

Probé las tres opciones y no funcionó nada. Cambié el tamaño a 320px y sigue viéndose igual.

Blueli, haz una copia de la plantilla y me la mandas por email.
Haber si logro ver el fallo desde la misma plantilla.
[email protected]

ami me a funcionado pero lo malo que cuando añades un gadet se te acopla debajo .. pero al fin lo coloque muchas gracias es una buen truco..por cierto antonio cambie el carrusel de sitio como puedo mejorar esa imagen que me salke recortado?te elazado y repito gracias

David, al reducir el carrusel habría que modificar varias cosas, pero puede que te vaya bien solo buscando en la plantilla este trozo de código: visible: 4, y colocarle solo 3.

Listo y si te pregunto ? Si es posible añadir los comentarios en carrusel tanto encima de los títulos será posible?

David, es complicado colocar los comentarios en horizontal y aún así, ralentizaría demasiado la carga del blog.
Como verás no existe ningún tutorial sobre ello, tan solo en vertical existe un slider.

Y si es posible en estos comentarios poner emoticonos .es que quería subir u crear imágenes. A mi estilo .. si es posible en estos comentarios . Es que tp. La plantilla da para mucho.. o eso lo estoy intentando poner igual es mi plantilla o no se puede ..

Sólo cogí una parte del código pero me sirvió perfectamente. Gracias, un saludo.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"