22 abril 2014

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

contador 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

contadores 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

contador-social-redes

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.



Escrito por:

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

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

15 comentarios

Este comentario ha sido eliminado por el autor.
Este comentario ha sido eliminado por el autor.

xD Disculpa amigo ya lei que es manual gracias

Amigo please quiero el widget de redes que tienes tu y con los mismo estilos please mira la imagen por favor...

http://fotos.subefotos.com/0bff845cba586f8f66dda741e877726ao.png

Y de paso amigo me ayudarías a como poner como esta imagen como logo en la cabecera:
https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F-RKfF3ognPeQ%2FU2J_Xh31qYI%2FAAAAAAAAAJ4%2FaQL_uw1et0I%2Fs1600%2FLOGO%2BZONA%2BCATRACHA.png&container=blogger&gadget=a&rewriteMime=image%2F*




en la plantilla de mi blogger: https://www.firedrive.com/file/483357EB2BD6D5A3



Este es el logo amigo please

https://lh6.googleusercontent.com/-RKfF3ognPeQ/U2J_Xh31qYI/AAAAAAAAAJ8/VrPY9ffkGMM/h82/LOGO%2BZONA%2BCATRACHA.png

Nitro el código lo tienes en esta misma entrada tal cual lo tengo yo instalado, copia el código y pégalo en un gadget html.

En cuanto al logo, solo debes editar el gadget de cabecera y subir la imagen.

Este comentario ha sido eliminado por el autor.

T.T amigo por favor ayúdame con lo del logo te lo ruego...

este es mi blog oficial.

www.zonacatrachahd.blogspot.com

¿Podría sustituir la imagen del feed rss por YouTube? Saludos!

Este comentario ha sido eliminado por el autor.

Weekend busca esta url https://googledrive.com/host/0BwZ7Sm1QQc1lVXNaVjc0djByb2c/caja-social y cambia por esta otra https://googledrive.com/host/0BwZ7Sm1QQc1lVXNaVjc0djByb2c/caja-social1.gif

Muchísimas gracias. Un saludo!

hola amor sevillista yo tengo desde hace como un mes estos botones en mi pagina pero hace un par de dias ya no se los ve y veo que en tu pagina tampoco se los ve no se si es problema mio o en general, te agradecería si me podrías dar una solucion

Sanosuke, no te preocupes que suele solucionarse solo, es problema del servidor.


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"