Mostrar total de seguidores (redes sociales)

Hace unos años empezé mostrando una caja que mostraba el total de seguidores de las diferentes redes sociales, concretamente fué el 22 de Diciembre del 2011, con la entrada Gadget contador redes sociales y blogger

Más tarde, el 13 de Abril del 2013, de nuevo publiqué otra caja social  Widget contador de tus seguidores en las Redes Sociales

Todos ellos eran manuales, hasta que a principios de año publiqué otro totalmente automático en un popup, pero la verdad es que no soy muy partidario de las ventanas emergentes y menos de los script innecesarios que aumentan considerablemente la carga del blog pero no dejo de comprender que hay usuarios a los cuales les gusta.
Este gadget fué publicado el 19 de Febrero del 2014  Mostrar total de seguidores con botones de seguir en un popup

Y de nuevo regreso con otro totalmente manual solo con CSS para evitar el peso innecesario de los script automáticos que solo hacen como dije anteriormente, aumentar la carga del blog. Su instalación es facilísima, solo copiaremos y pegaremos el código en un gadget/html y modificaremos solo los enlaces de las diferentes redes sociales.

De momento la DEMO la podéis observar en el principio de mi sidebar.

Código

<style>.caja-social{width:280px;overflow:hidden;background-color:#f2f2f2;text-align:center;margin:0;padding:10px 9px}
a.caja-p-social{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;background-image:url(https://googledrive.com/host/0BwZ7Sm1QQc1lVXNaVjc0djByb2c/caja-social);background-repeat:no-repeat;margin:0;padding:4px 0}
.caja-interior-social{background:#f8f8f8;overflow:hidden;float:left;display:inline-block;margin:0 0 0 8px}
.caja-interior-social:hover{background:#fff;box-shadow:0 -2px 0 #ffffff inset}
.caja-interior-social:nth-child(1):hover{box-shadow:0 -2px 0 #0C00E6 inset}
.caja-interior-social:nth-child(2):hover{box-shadow:0 -2px 0 #00BCE6 inset}
.caja-interior-social:nth-child(3):hover{box-shadow:0 -2px 0 #C30909 inset}
.caja-interior-social:nth-child(4):hover{box-shadow:0 -2px 0 #FF9D2D inset}
.caja-interior-social:first-child{margin-left:0}
.facebook-box{background-position:7px 4px}
.rss-box{background-position:-73px 4px}
.twitter-box{background-position:-153px 4px}
.googleplus-box{background-position:-233px 4px}
.counter{font-family:Oswald, Calibri, Sans-Serif;line-height:1.2em;font-size:16px;font-weight:500;margin:60px 0 0}
.social-title{color:#888;font-size:11px}</style>
<div class='caja-social'><div class='caja-interior-social'><a class='caja-p-social facebook-box' href='https://www.facebook.com/NOMBRE-PAGINA-FACEBOOK' rel='nofollow' target='_blank'><div class='counter'> Nº SEGUIDORES-F</div><span class='social-title'>Fans</span></a></div><div class='caja-interior-social'><a class='caja-p-social twitter-box' href='https://www.twitter.com/NOMBRE-TWITTER' rel='nofollow' target='_blank'><div class='counter'> Nº SEGUIDORES-T</div><span class='social-title'>Seguidores</span></a></div><div class='caja-interior-social'><a class='caja-p-social googleplus-box' href='https://plus.google.com/ID-PERFÍL-PAGINA-GOOGLE' rel='nofollow' target='_blank'><div class='counter'> Nº SEGUIDORES-G</div><span class='social-title'>Seguidores</span></a></div><div class='caja-interior-social'><a class='caja-p-social rss-box' href='/feeds/posts/default'><div class='counter'> Nº SEGUIDORES-FEED </div><span class='social-title'>Subscribe</span></a></div></div>

Modificaciones:
Tan fácil como cambiar lo solicitado en el código.

Publicaciones Relacionadas