Botones con contadores de redes sociales para blogger

Los sitios web suelen utilizar botones con contadores para generar más seguidores en sus redes sociales, promover el intercambio social o para aumentar el tráfico del sitio. Estos botones pueden mostrarse de muchas formas diferentes y pueden tener diferentes funciones. Con esta mini-guía podrás agregar un widget de botones para redes sociales con contadores.

¿Estás intentando volverte viral?

Muy buena idea, tienes que tener en claro que no necesitas obtener millones de seguidores o visitas para hacer un blog o un negocio en línea exitoso. Es posible que puedas ganarte la vida con solo unos pocos cientos de seguidores en su página de Facebook. O podría vender suscripciones para sus programas en línea. En cualquiera de los casos el widget de botones con contadores de redes sociales te ayudara en esta causa.

Lo importante acá es comprender que las redes sociales son importantes para su estrategia de marketing digital, por eso no debes desanimarte solo porque ves grandes cuentas con millones de seguidores o videos con millones de vistas. Cada negocio es diferente, por lo que se trata más de cómo usar las redes sociales.

Además, los expertos consideran que las redes sociales son una de las herramientas más efectivas del marketing digital. Y, obviamente, estas se convierten en una fuente importante de tráfico para la mayoría de los sitios web en línea. Por lo tanto, la integración de las redes sociales es esencial para el marketing y la marca de su sitio web en el siglo XXI. Afortunadamente, en Tecneófito compartimos a menudo widget que facilitan mucho la tarea, con muchos complementos para elegir.

El widget de botones con contadores viene equipado con los sitios de redes sociales más populares, junto con un botón de RSS. El widget no necesitará de ninguna personalización.

El widget se insertará perfectamente en el sidebar de tu blog, con el fin de aumentar tu número de fans, seguidores y lectores. Debido a su atractivo diseño, este widget alentará a tus lectores a hacer clic en el botón, debido al efecto de deslizamiento con transiciones CSS3.

Widget de botones con contadores de redes sociales para blogger

¿Cómo Añado el widget de Botones con contadores de redes sociales a mi blog?

  • Ir a Blogger -> Plantilla -> Edición de HTML ->
  • Buscar la etiqueta ]></b:skin> y justo encima pegar el siguiente código y guardar la plantilla.
    .tbisbox {font: 25px/24px normal 'Denk One', sans-serif; display: inline-block;position: relative;width: 95%;max-width: 280px;margin: 0 auto 15px auto;padding: 16px;background-color: rgba(238, 238, 238, 0.1);box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;     box-sizing: border-box;}
    .tbislso {width: 95%;max-width: 280px;padding-top: 8px;padding-left: 8px;padding-right: 8px;}
    .tbislso a {text-decoration: none !important;}
    .tbislso ul {margin: 0;padding: 0;list-style: none;}
    .tbislso ul li {display: inline;margin: 0;padding: 0;text-indent: 0;}
    .tbislso ul li a.facebook {border-left: 65px solid rgba(59, 89, 152, 1);     color: rgba(59, 89, 152, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
    .tbislso ul li a.facebook p {margin: 2px 20px 0 -70px; display: inline-block;     color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
    .tbislso ul li a.facebook:hover {background: rgba(59, 89, 152, 1);border-left: 0px solid rgba(59, 89, 152, 0.1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
    .tbislso ul li a.facebook:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}
    .tbislso ul li a.twitter {border-left: 65px solid rgba(64, 153, 255, 1);color: rgba(64, 153, 255, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
    .tbislso ul li a.twitter p {margin: 2px 20px 0 -70px; display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
    .tbislso ul li a.twitter:hover {background: rgba(64, 153, 255, 1);     border-left: 0px solid rgba(64, 153, 255, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
    .tbislso ul li a.twitter:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}
    .tbislso ul li a.gplus {border-left: 65px solid rgba(219, 74, 57, 1);color: rgba(219, 74, 57, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
    .tbislso ul li a.gplus p {margin: 2px 20px 0 -70px;display: inline-block;     color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
    .tbislso ul li a.gplus:hover {background: rgba(219, 74, 57, 1);border-left: 0px solid rgba(219, 74, 57, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;     -ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;     transition: all 300ms ease-in-out;}
    .tbislso ul li a.gplus:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}
    .tbislso ul li a.pinterest {border-left: 65px solid rgba(174, 45, 39, 1);color: rgba(174, 45, 39, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
    .tbislso ul li a.pinterest p {margin: 2px 20px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
    .tbislso ul li a.pinterest:hover {background: rgba(174, 45, 39, 1);border-left: 0px solid rgba(174, 45, 39, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;
    }
    .tbislso ul li a.pinterest:hover p {opacity:0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}
    .tbislso ul li a.rss {border-left: 65px solid rgba(255, 102, 0, 1);color: rgba(255, 102, 0, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;     -ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition:all 300ms ease-in-out;}
    .tbislso ul li a.rss p {margin: 2px 20px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;     transition: all 300ms ease-in-out;}
    .tbislso ul li a.rss:hover {background: rgba(255, 102, 0, 1);     border-left: 0px solid rgba(255, 102, 0, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
    .tbislso ul li a.rss:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}
    

Vamos a añadir el widget de botones con contadores en el sidebar.

  • Ir a Blogger -> Diseño
  • Haz clic en ‘Agregar un gadget’ (Sidebar)
  • Selecciona «HTML / Javascript» de la lista y pegue el siguiente código:
    <div class="tbislso">
    <ul>
    <li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li>
    <li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li>
    <li><a class="tbisbox gplus" href="#"><p>5K+&nbsp;</p>Google+</a></li>
    <li><a class="tbisbox pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>
    <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li>
    </ul>
    </div>
    
  • Reemplaza el # con tus respectivas direcciones URL de redes sociales
  • Coloca tu número de fans, seguidores y lectores. Eso es todo!

Conclusión

Y eso es todo esperamos que el widget de botones con contadores de redes sociales te sea de utilidad. Las redes sociales son una herramienta fundamental e importante para los propietarios de sitios web. Con herramientas como estas, podrá conectarse mucho mejor con su audiencia.

Si desea llevar su marketing en redes sociales un paso más allá, puede utilizar el widget de botones con contadores de redes sociales para su sitio web. En caso de que sea un principiante y no tenga idea de cómo instalar este widget puede hacernos saber sus dudas en caja de comentarios.

Espero que hayas disfrutado leyendo el artículo. ¡Oh! Y no olvide compartirlo con sus amigos en las redes sociales. Que tenga un gran día y también síganos en Twitter y Facebook para futuras actualizaciones.

Deja una respuesta

Mira más contenido relacionado

Cómo recuperar mensajes de Instagram eliminados

por Tecneófito, octubre 27, 2021

Instagram es una de las redes sociales más populares en la actualidad, con miles de...

¿Cómo agregar una imagen de perfil a Zoom en Windows y Android?

por Tecneófito, agosto 17, 2021

Agregar una imagen de perfil a Zoom no es una tarea complicada, pero primero veamos...

Cómo utilizar el análisis de la competencia para mejorar su SEO

por Tecneófito, agosto 9, 2021

El análisis de la competencia no es una estrategia nueva. La historia nos ha mostrado...

¡Descubre como verificar tu perfil de Twitter! Actualizado 2021

por Tecneófito, junio 10, 2021

Hace algún tiempo se había eliminado la opción de como verificar tu perfil de...

¡Descubre como acelerar los audios de WhatsApp con la última actualización!

por Tecneófito, junio 7, 2021

Los mensajes instantáneos y las notas de voz constituyen los medios más utilizados...

Aprende a quitar los “Me gusta” de tus publicaciones de Instagram

por Tecneófito, junio 1, 2021

Hasta este momento una de las aplicaciones más populares entre las personas es...