13 abril 2013

Widget contador de tus seguidores en las Redes Sociales


En esta entrada os voy a mostrar la forma de colocar un widget que nos informa del número de suscriptores que tenemos en cada una de nuestras redes sociales, los lectores de FeedBurner, los seguidores de Google+, los fans de Facebook y los seguidores de Twitter con un movimiento oscilante al colocar el ratón sobre cada icono.


Cómo instalar:

1.- Entrar en panel de administración - Diseño - Añadir un gadget HTML/Javascript y pega el siguiente código:
<style>
.contador a {display:block;height:50px;width:50px;padding:0 4px;float:left;
background:transparent url(https://lh4.googleusercontent.com/-sPGRSZXh1Mg/UWk1bkeTriI/AAAAAAAALJI/PMhqzZcY_NA/s454/contador.png ) no-repeat;
-webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all;cursor:pointer;}
.contador a.googleplus {background-position: 0px -58px;}
.contador a.googleplus:hover {background-position: 0px 0px;}
.contador a.twitter {background-position: 0px -290px;}
.contador a.twitter:hover {background-position: 0px -232px;}
.contador a.facebook {background-position: 0px -406px;}
.contador a.facebook:hover {background-position: 0px -348px;}
.contador a.rss {background-position: 0px -174px;}
.contador a.rss:hover {background-position: 0px -116px;}
</style>
<div class='contador'>
<div class="redesss" style="font-size:10px;font-weight: bold;text-align:center;font-family: Arial, Helvetica, sans-serif;">
<div style="width: 48px;float:left;margin-right:5px;">
<a class='rss' href="URL-FEED-FEEDBURNER" rel='external nofollow' target='_blank'></a>
<b style="font-size: 12px;">Número de lectores del feed</b> <br/>Lectores
</div>
<div style="width:48px;float:left;margin-right:5px;">
<a class='googleplus' href="URL-PERFIL-o-PÁGINA-GOOGLE+" rel='external nofollow' target='_blank'></a>
<b style="font-size: 12px;">Número-de-seguidores-Google+</b> <br/>Seguidores
</div>
<div style="width:48px;float:left;margin-right:5px;">
<a class='facebook' href="URL-DE-PÁGINA-FACEBOOK" rel='external nofollow' target='_blank'></a>
<b style="font-size: 12px;">Número-de-seguidores-Facebook</b> <br/>Fans
</div>
<div style="width:48px;float:left;margin-right:5px;">
<a class='twitter' href="URL-DE-TWITTER" rel='external nofollow' target='_blank' ></a>
<b style="font-size: 12px;">Número-de-seguidores-Twitter</b> <br/>Seguidores
</div>

1.- Realice los siguientes cambios:
Lo marcado en negrita por las URL de vuestras Redes Sociales y por los lectores y seguidores de ellos.
2.- Guardar y Listo.-


Escrito por:

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

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

4 comentarios

Hola, cordial saludo. Tengo mi blog emprendernegociosmultinivel.blogspot.com con vistas dinámicas, ¿será que puedo aplicar este widget contador en mi blog?. Veo tambíen que tienes Linkedin y Pinterest, también las quiero agregar en el mío. Gracias por tus trucos, están muy buenos.

Mil gracias, me ha ido genial,

solo me queda una duda, he añadido el widget en la parte superior, en la cabecera, como puedo centrarlo, he añadido el código div align="center">.... /div y no se me centra

¿qué puedo hacer?

te dejo el link mira que genial me ha quedado!!

http://tallersmariavictrix.blogspot.com.es/

mil gracias
Maria Victrix

María, si lo has colocado en un widget central (bajo cabecera o menú), te debe salir centrado.
Ahora si lo has colocado en un widget que no está centrado en el blog, jamás se te puede cenntrar porque se centraría dentro del widget pero no en el blog.

No sé si me habrás entendido.


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"