Botones con contadores de redes sociales para blogger

Los sitios web suelen utilizar botones 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.

El widget 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.

Instalar Widget en Blogger

Paso 1: Cómo Añado este widget 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;}
    

Paso 2: Vamos a añadir el widget 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!

Mira más contenido relacionado

Programando a tu whatsapp bot en Android

por Manuel Zambrano Spicer, octubre 29, 2018

A día de hoy, la famosa App cuenta con 1200 millones de usuarios activos que no paran...

¿Qué plataformas de medios sociales debería usar mi Mype?

por Jhon Torres, octubre 1, 2018

Los medios sociales han demostrado ser una de las mejores herramientas de marketing...

Cómo sobrevive una pequeña empresa sin redes sociales en el siglo XXI

por Jhon Torres, septiembre 25, 2018

¿Podría su pequeña empresa sobrevivir sin las redes sociales?  la respuesta corta es...

Como agregar iconos de redes sociales en blogger con FontAwesome

por Jhon Torres, septiembre 18, 2018

¿Como agregar iconos de redes sociales a tu blog en blogger ? Una de las soluciones...

Cómo diseñar una imagen con Canva

por Manuel Zambrano Spicer, septiembre 12, 2018

Que tal, hace un tiempo atrás vengo utilizando el diseñador de imágenes en linea...

Como agregar paginación numerada en blogger

por Jhon Torres, septiembre 10, 2018

La paginación estándar de Blogger le permite a los lectores mostrar enlaces de...