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"

 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.

Publicaciones Relacionadas