Botones de Suscripción en Redes Sociales para Blogger

Hoy traigo unos cuantos botones para que nuestras visitas puedan suscribirse a nuestras cuentas en diversas redes sociales. Estos botones de suscripción son muy llamativos, puesto que tienen un movimiento y cambio de color al pasar el cursor sobre ellos.

Le he realizado algunos ajustes para que funcione correctamente en Blogger.

No habrá problemas de incompatibilidad o errores al funcionar porque este Gadget no utiliza scripts. Sus efectos están hecho en CSS, y esto no afectara ningún otro artilugio de nuestro blog.

Aquí una vista previa de los botones de suscripción: Demo

Para agregar este Widget al blog, ve a Plantilla - Editar HTML, da un clic dentro de la plantilla, presiona Ctrl + F, escribe ]]></b:skin> y presiona la tecla Enter. Justo antes pega el siguiente código.

/* Widget-TerrenoBlogger.co */
.widget-counter{
 margin-bottom:20px;
 overflow:hidden;
 background: white;
 border-radius: 1px;
 -moz-border-radius: 1px;
 -webkit-border-radius: 1px;
 box-shadow: 0 1px 3px 0 #B5B5B5;
 -moz-box-shadow: 0 1px 3px 0 #b5b5b5;
 -webkit-box-shadow: 0 1px 3px 0 #B5B5B5;
 clear: both;
 border: 1px solid #DDD;
 border-bottom:0 none;
}
.widget-counter.col1 lo{width:100%;border:0 none !important;}
 .widget-counter.col2 lo, .widget-counter.col4 lo{width: 153px;border-width:0 0 1px 0 !important;}
 .widget-counter.col2 lo:nth-child(2n+2) , .widget-counter.col4 lo:nth-child(2n+2){border-left:1px solid #DDD !important;}

.widget-counter lo{
  line-height:15px;
  float:left;
  width:102px;
  padding:7px 0;
  border-bottom:1px solid #ddd;
  -moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;
 }
  .widget-counter lo:nth-child(3n-1) { border-right:1px solid #DDD; border-left:1px solid #DDD;}

  .widget-counter lo a{display:block;text-align:center;}
  .widget-counter lo a strong{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiclGTYmbGTnaFA9HA8bYN7lNtB3ntxIzoOxuFSsEuDiQR-xYQvpc3RWThfwYP0uOhZpyYTTlTQev-OvN19mJhisV2atLUbN-8BVTs1xam2jQ0UC622Ge2usIOXNUDEflDg7Gho1LPV_oE/s1600/separate%5B1%5D.png) no-repeat;opacity:.6;display:block; height:51px; margin-bottom:5px; -webkit-transition: all ease-in-out 0.2s;  -moz-transition: all ease-in-out 0.2s;  -o-transition: all ease-in-out 0.2s;  transition: all ease-in-out 0.2s;}
  .widget-counter lo a:hover strong{opacity:1;}
  .widget-counter lo:hover{ background-color:#F8F8F8;}
  .widget-counter lo:hover a{text-decoration: none;}
  .widget-counter lo.rss-subscribers a strong{ background-position:center -884px ;}
  .widget-counter lo.rss-subscribers a:hover strong{ background-position:center -939px ;}
  .rss-subscribers span{font-family: BebasNeueRegular,arial,Georgia, serif;font-size: 14pt;display: inline-block;}
  .widget-counter lo.facebook-fans a strong { background-position:center -992px ;}
  .widget-counter lo.facebook-fans a:hover strong { background-position:center -1046px ;}
  .widget-counter lo.twitter-followers a strong{ background-position:center -668px;}
  .widget-counter lo.twitter-followers a:hover strong{ background-position:center -722px;}
  .widget-counter lo.youtube-subs a strong{ background-position:center -776px;}
  .widget-counter lo.youtube-subs a:hover strong{ background-position:center -830px;}
  .widget-counter lo.vimeo-subs a strong{ background-position:center -560px;}
  .widget-counter lo.vimeo-subs a:hover strong{ background-position:center -614px;}
  .widget-counter lo.dribbble-followers a strong{ background-position:center -452px;}
  .widget-counter lo.dribbble-followers a:hover strong{ background-position:center -506px;}
  .widget-counter lo span{display:block;font-size:15px;}
  .widget-counter lo a small{color:#777;}
   #widget-TB {width: 310px; height: 200px;}

Si tu quieres que el Ancho y Alto de la caja se modifique automáticamente a las medidas de tu blog, puedes eliminar la linea marcada en morado.

Sin embargo, podría no verse bien y desordenarse completamente el widget. Lo recomendable es dejar las medidas originales.

Después de esto, ve a Diseño - Añadir un gadget - HTML/Javascript, y pega el siguiente codigo.

<div id='widget-TB'>
  <div class="widget-counter">
   <TB>
       <lo class="rss-subscribers">
     <a href="http://feeds.feedburner.com/terrenoblogger" target='_blank'>
      <strong></strong>
      <span>Subscribete</span>
      <small>Al Feed RSS</small>
     </a>
    </lo>
          <lo class="twitter-followers">
     <a href="http://www.twitter.com/terrenoblogger" target='_blank'>
      <strong></strong>
      <span>Twiiter</span>
      <small>Seguidores</small>
     </a>
    </lo>
          <lo class="facebook-fans">
     <a href="https://www.facebook.com/pages/Terreno-Blogger/161470857350835" target='_blank'>
      <strong></strong>
      <span>Facebook</span>
      <small>Fans</small>
     </a>
    </lo>
          <lo class="youtube-subs">
     <a href="http://www.youtube.com/USUARIO" target='_blank'>
      <strong></strong>
      <span>Youtube</span>
      <small>Subscriptores</small>
     </a>
    </lo>
          <lo class="vimeo-subs">
     <a href="https://vimeo.com/USUARIO" target='_blank'>
      <strong></strong>
      <span>Vimeo</span>
      <small>Subscriptores</small>
     </a>
    </lo>
          <lo class="dribbble-followers">
     <a href="http://dribbble.com/USUARIO" target='_blank'>
      <strong></strong>
      <span>Dribble</span>
      <small>Seguidores</small>
     </a>
    </lo>
   </TB>
  </div></div>

Cambia todos los enlaces marcados en verde, por los links respectivos de tus cuentas.

Recuerda que tus enlaces pueden ser diferentes a los que he dejado, pero no habrá problema por ello.

Al haber realizado lo anterior, tendrás unos llamativos botones de suscripción que atraerán a tus lectores y los incitara a seguirte en las redes sociales.

Con esto hemos terminado.

Si surgen dudas o inconvenientes, coméntalos!