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.

¿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.