Personalizar contador de seguidores en redes sociales

  • Autor Autor Johao Hernandez
  • Fecha de inicio Fecha de inicio
J

Johao Hernandez

Buen dia betas

en la pagina de Juan merodio vi este contador de seguidores en sus redes sociales
BtRrYk1AT5OgR_YNpbdoUA.png


al revisar el codigo de la pagina me aparece esto
Insertar CODE, HTML o PHP: 
[TABLE]
[TR]
[TD="class: line-content"]<header>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]    <div id="header-bar">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]        <div class="ancho-limitado">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]        <div id="contadores-redes-sociales">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            <a id="facebook" href="[URL="http://www.facebook.com/JuanMerodio"]Security Check Required[/URL]" target="_blank">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <span class="fa fa-facebook fa-fw"></span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div class="counter">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    <span>25.341</span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    seguidores[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                </div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div style="clear:both"></div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            </a>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            <a id="twitter" href="[URL="http://www.twitter.com/juanmerodio"]Juan Merodio (@juanmerodio) on Twitter[/URL]" target="_blank">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <span class="fa fa-twitter fa-fw"></span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div class="counter">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    <span>101.347</span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    seguidores[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                </div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div style="clear:both"></div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            </a>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            <a id="google-plus" href="[URL="https://plus.google.com/+JuanMerodioBlog"]Browser not supported - Google+[/URL]" target="_blank">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <span class="fa fa-google-plus fa-fw"></span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div class="counter">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    <span>31.715</span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    seguidores[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                </div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div style="clear:both"></div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            </a>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            <a id="linkedin" href="[URL]https://www.linkedin.com/in/juanmerodio/es[/URL]" target="_blank">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <span class="fa fa-linkedin fa-fw"></span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div class="counter">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    <span>500+</span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    contactos[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                </div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div style="clear:both"></div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            </a>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            <a id="instagram" href="[URL="https://www.instagram.com/juanmerodio"]Juan Merodio (@juanmerodio) ? Instagram photos and videos[/URL]" target="_blank">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <span class="fa fa-instagram fa-fw"></span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div class="counter">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    <span>6.800</span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    seguidores[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                </div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div style="clear:both"></div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            </a>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            <a id="youtube" href="[URL]http://www.youtube.com/subscription_center?add_user=juanmerodio[/URL]" target="_blank">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <span class="fa fa-youtube fa-fw"></span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div class="counter">[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    <span>14.624</span>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                    suscriptores[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                </div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]                <div style="clear:both"></div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            </a>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]            <div style="clear:both"></div>[/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]        </div>[/TD]
[/TR]
[/TABLE]

como hacer para que se vea igual a la imagen, ya que al sustituir las redes sociales con las otras personalizadas, no se mira igual al agregarlo a una web. y me gusto como se mira


ayuda porfa

- - - Actualizado - - -

Se mira asi al agregar el codigo a una web
cq1l23EqTcWU5zenwmC8vA.png


Desde El movil se mira asi, bastante bonito a mi parecer
HCnAlgHxQFi99H9hiZBq5g.png
 
Última edición:
Exactamente debes agregar el css que ese es el que le da el estilo que quieres 😉

Enviado desde mi HUAWEI VNS-L23 mediante Tapatalk
 
Johao Hernandez dijo:
a ok compañero, Debere contratar a un programador o el css tambien esta en el codigo de la pagina?

te agradezco por comentar

- - - Actualizado - - -



Gracias por comentar !!
Hacer clic para expandir...
Claro, revisando el codigo puedes obtener el css y los estilos.
Pero a como veo, ya que solo copiaste el codigo HTML el contador no aumentara ni subira sera estatico, a menos que lo vayas editando

Enviado desde mi HUAWEI VNS-L23 mediante Tapatalk
 
carlitox4852 dijo:
Claro, revisando el codigo puedes obtener el css y los estilos.
Pero a como veo, ya que solo copiaste el codigo HTML el contador no aumentara ni subira sera estatico, a menos que lo vayas editando

Enviado desde mi HUAWEI VNS-L23 mediante Tapatalk
Hacer clic para expandir...


a ok comprendo, gracias por tu ayuda, buscare un programador que lo haga. y si solo copie, pegue y modifique urls,

Gracias !!!
 
Johao Hernandez dijo:
Debere contratar a un programador o el css tambine esta en el codigo de la pagina?
Hacer clic para expandir...

El css también es visible desde el código fuente, en este caso es este:

HTML: 
#contadores-redes-sociales{ padding-bottom: 20px; }
#contadores-redes-sociales > a{ display: block; width: 15%; margin: 0 1%; float: left; }
#contadores-redes-sociales > a:nth-child(6n+1){ clear: left; margin-left: 0; }
#contadores-redes-sociales > a:nth-child(6n){ clear: right; margin-right: 0; }
#contadores-redes-sociales > a .fa{ display: block; float: left; font-size: 26px; width: 40px; text-align: center; padding: 7px 0; border-radius: 5px; color: #FFF; -webkit-transition:background 0.35s ease-in; -moz-transition:background 0.35s ease-in; -o-transition:background 0.35s ease-in; transition:background 0.35s ease-in; }
#contadores-redes-sociales > a .fa.fa-facebook{ background: #3B5998; }
#contadores-redes-sociales > a .fa.fa-twitter{ background: #55ACEE; }
#contadores-redes-sociales > a .fa.fa-google-plus{ background: #E04A39; }
#contadores-redes-sociales > a .fa.fa-youtube{ background: #EE1C1B; }
#contadores-redes-sociales > a .fa.fa-linkedin{ background: #0077B5; }
#contadores-redes-sociales > a .fa.fa-instagram{ background: #3897F0; }
#contadores-redes-sociales > a:hover .fa{ background: #FF8D00; }
#contadores-redes-sociales > a .counter{ padding-left: 50px; text-align: center; font-size: 12px; }
#contadores-redes-sociales > a .counter span{ font-size: 30px; display: block; text-align: center; -webkit-transition:color 0.35s ease-in; -moz-transition:color 0.35s ease-in; -o-transition:color 0.35s ease-in; transition:color 0.35s ease-in; }
#contadores-redes-sociales > a:hover .counter span{ color: #FF8D00; }

Agregándolo el contador se verá igual que la página que mencionas pero únicamente en una resolución de escritorio, para que se vea correctamente desde móvil tienes que aplicar las grids de tu theme (si es que tiene, de lo contrario tendrías que hacer unas). Por otro lado las estadísticas (followers, likes...) no se actualizarán automáticamente sin algo de JS o PHP. Así que en conclusión, te recomiendo instalar un Plugin como este (Social Media Counters / SILICON COUNTERS ? WordPress Plugins) o contactar a un programador.

PD: Ten en cuenta que si agregas el código de arriba debes agregarlo o bien al archivo "style.css" o agregarlo donde sea que añadas el html con las etiquetas <style></style>
 
diasprico dijo:
El css también es visible desde el código fuente, en este caso es este:

HTML: 
#contadores-redes-sociales{ padding-bottom: 20px; }
#contadores-redes-sociales > a{ display: block; width: 15%; margin: 0 1%; float: left; }
#contadores-redes-sociales > a:nth-child(6n+1){ clear: left; margin-left: 0; }
#contadores-redes-sociales > a:nth-child(6n){ clear: right; margin-right: 0; }
#contadores-redes-sociales > a .fa{ display: block; float: left; font-size: 26px; width: 40px; text-align: center; padding: 7px 0; border-radius: 5px; color: #FFF; -webkit-transition:background 0.35s ease-in; -moz-transition:background 0.35s ease-in; -o-transition:background 0.35s ease-in; transition:background 0.35s ease-in; }
#contadores-redes-sociales > a .fa.fa-facebook{ background: #3B5998; }
#contadores-redes-sociales > a .fa.fa-twitter{ background: #55ACEE; }
#contadores-redes-sociales > a .fa.fa-google-plus{ background: #E04A39; }
#contadores-redes-sociales > a .fa.fa-youtube{ background: #EE1C1B; }
#contadores-redes-sociales > a .fa.fa-linkedin{ background: #0077B5; }
#contadores-redes-sociales > a .fa.fa-instagram{ background: #3897F0; }
#contadores-redes-sociales > a:hover .fa{ background: #FF8D00; }
#contadores-redes-sociales > a .counter{ padding-left: 50px; text-align: center; font-size: 12px; }
#contadores-redes-sociales > a .counter span{ font-size: 30px; display: block; text-align: center; -webkit-transition:color 0.35s ease-in; -moz-transition:color 0.35s ease-in; -o-transition:color 0.35s ease-in; transition:color 0.35s ease-in; }
#contadores-redes-sociales > a:hover .counter span{ color: #FF8D00; }

Agregándolo el contador se verá igual que la página que mencionas pero únicamente en una resolución de escritorio, para que se vea correctamente desde móvil tienes que aplicar las grids de tu theme (si es que tiene, de lo contrario tendrías que hacer unas). Por otro lado las estadísticas (followers, likes...) no se actualizarán automáticamente sin algo de JS o PHP. Así que en conclusión, te recomiendo instalar un Plugin como este (Social Media Counters / SILICON COUNTERS ? WordPress Plugins) o contactar a un programador.

PD: Ten en cuenta que si agregas el código de arriba debes agregarlo o bien al archivo "style.css" o agregarlo donde sea que añadas el html con las etiquetas <style></style>
Hacer clic para expandir...


Aclaraste todas mis dudas, muy gentil de tu parte, muy agradecido contigo
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

yasuo_22
  • Cerrado
Se solicita Desarrollador Web y Especialista en SEO para Tienda de Seguidores para Redes Sociales
Respuestas
4
Visitas
163
Leonardo Sandoval
L
A
  • Cerrado
Venta Servicio de Venta de Seguidores para Redes Sociales
Respuestas
3
Visitas
153
ultd producciones
ultd producciones
Juancho003
  • Cerrado
Venta Seguidores Para Redes Sociales A Buen Precio
2 3
Respuestas
54
Visitas
1K
aangbonzu
aangbonzu
Scriptonite
  • Cerrado
Venta ✅ Seguidores para redes sociales Hispanos y mundial
Respuestas
10
Visitas
377
skorpio
skorpio
S
  • Pregunta Pregunta
Costo por seguidores en redes sociales populares
Respuestas
3
Visitas
354
Suprax
S
Atrás
Arriba