22 diciembre 2011

Gadget contador redes sociales y blogger

redes sociales
Este Gadget muestra los iconos y el número de suscriptores que tenemos en cada una de nuestras redes sociales, los seguidores de Twitter, los fans de Facebook, el número de posts y los comentarios de Blogger con un movimiento oscilante al colocar el ratón sobre cada icono.
Cómo instalar:

1 - Entrar a Blogger .
- En la versión antigua de Blogger: Entrar al "Diseño" -> "Elementos de página", haga clic en "Añadir un gadget" -> "HTML / Javascript"
- En el nuevo panel: Ir a "Diseño", haga clic en "Añadir un gadget", seleccione "HTML / Javascript";

2 - Cuando se abra una ventana, pega el siguiente código:

<style>
/* Iconos Sociales */
#follow img:hover {
-webkit-animation-name: rotateThis;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: rotateThis;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
-o-animation-name: rotateThis;
-o-animation-duration: 2s;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in-out; }
@-webkit-keyframes rotateThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(360deg); }
}
@-moz-keyframes rotateThis {
0% { -moz-transform:scale(1) rotate(0deg); }
10% { -moz-transform:scale(1.1) rotate(0deg); }
100% {-moz-transform:scale(1.1) rotate(360deg); }
}
@-o-keyframes rotateThis {
0% { -o-transform:scale(1) rotate(0deg); }
10% { -o-transform:scale(1.1) rotate(0deg); }
100% {-o-transform:scale(1.1) rotate(360deg); }
}
</style>
<div id="follow">
<div class="redesss" style="font-size:10px;font-weight: bold;text-align:center;font-family: Arial, Helvetica, sans-serif;">
<div style="width: 62px;float:left;margin-right:10px;">
<a href="http://facebook.com/NOMBRE-PAGINA-FACEBOOK"><img src="http://codigosblog.net/servidor/gadget_social/facebook.png"/></a>
<b style="font-size: 12px;">1.000</b> <br/>Fans
</div>
<div style="width:62px;float:left;margin-right:10px;">
<a href="http://twitter.com/NOMBRE-TWITTER"><img src="http://codigosblog.net/servidor/gadget_social/twitter.png"/></a>
<b style="font-size: 12px;">1.000</b> <br/>Seguidores
</div>
<div style="width:62px;float:left;margin-right:10px;">
<img src="http://codigosblog.net/servidor/gadget_social/artigos.png"/>
<b style="font-size: 12px;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></b> <br/>Artículos
</div>
<div style="width: 62px;float:left;">
<img src="http://codigosblog.net/servidor/gadget_social/comment.png"/>
<b style="font-size: 12px;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script>   </b> <br/>Comentarios
</div>
<div style="clear:both;"></div>
</div>
</div>

3 - Realice los siguientes cambios:
NOMBRE-PAGINA-FACEBOOK: por el nombre de la página de Facebook
NOMBRE-TWITTER:por el nombre de usuario de Twitter.

4 - 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+

18 comentarios

Gracias me ha sido de gran ayuda!
El resultado es el que buscaba

Un Saludo y enhorabuena por tu trabajo

PD: ¿habría alguna forma de poner los iconos de Google+ con el numero de seguidores y de feedburner?

Gacias por el aporte, lo acabo de instalar!

Gracias por tu aporte, pero sabes como puedo poner un contador personalizado de Google+, que solo me muestre el numero de seguidores, luego apliocarle un poco de css... Gracias

Centralrender, automático la verdad no lo he comprobado pero manual si podrías hacerlo.

Excelente articulo.
Pero no me da el numero de seguidores en twitter, quiza algo ande mal en el script. Saludos.

Efectivamente José, todos los trucos que había sobre Twitter han dejado de funcionar tras su última actualización.
Saludos.

Amigo si que molesto pero mejor me puedes regalar tu gadget de seguidores en el tuyo se muestran cosas diferentes a la hora de seleccionar que es diferente al de este post...

saludos y muchas gracias

Nitro por los demás comentarios que has dejado, deduzco que este no era el post que buscabas.

Si amigo es que tienes varias cosas interesantes que se las puedo añadir a mi blog esta es una y ya se la apliquea mi blog, pero veo el gadget que esta en tu site es diferente a la hora de seleccionar las redes osea el estilo... tiene una pequeña diferencia pero lo hace ver mas hermoso...

y si yo puedo cambiar los iconos a este gadget manual tuyo por estos:

http://www.deviantart.com/art/Social-2-Duo-118057239

Nitro cambia solo las url de las imágenes por las que te gusten y listo.

mira donde puedo encontrar el código de seguidores flotante al dado izquierdo el que se mueve Y ENTRADAD POR FAS MI CORREO ES [email protected] ayudem por fas me gusto mucho

Amor Sevillista necesito tu ayuda solo que me des el nombre de como se llama este tipo de gadget que funciona en las entradas de blogger...

necesito que me ayudes como insertar etiquetas en las entradas como estas que son como mapa...

http://fotos.subefotos.com/968349771e91a3f7e780e9848832f48bo.jpg

please help me please...

Olger no se a cual te refieres, déjame un ejemplo mediante imagen o url donde lo has visto.

Nitro, no te recomiendo ese tipo de script, yo lo instalé y terminé quitándolo, repercutía muchísimo en la carga del blog y a veces hasta no abría la página.

Ok T.T pero me pudieses decir solo como se llaman please...

Nitro eso se llama breadcrumbs y puedes verlo en Oloblogger

100mil gracias amigo eres el único por toda la red, que me ayudado Ojala gane tu Sevilla ñ.ñ...



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"