Botones sociales animados con efecto slider

By: Iván Dangerfielden jueves, marzo 13, 2014
Siempre ando en la pesquisa de botones de redes sociales, con efectos que me asombren y me llamen la atención, y que tengan un diseño poco usual y alternativo a lo que estamos acostumbrados, a ver, visualmente. Diseños originales y extravagantes, o poco comunes. Y en está ocasión, he dado con unos que me han gustado muchísimo, y los he encontrado en Codepen y están diseñados por Designil. Y estos botones, tienen iconos de redes sociales, qué son los siguientes, y que verás seguidamente: Twitter, Facebook, RSS, y Google+, entre otros.
Los botones que os voy a presentar hoy, se pueden adaptar fácilmente en la plataforma Blogger, Wordpress, etcétera. O también, y cómo no, en cualquier documento HTML. Estos botones llevan consigo un efecto realmente espectacular, tienen un efecto slider horizontal, al hacer hover, con un contador de seguidores manual. Cómo siempre, una demostración vale más mil palabras, así que no me voy a explayar demasiado, en la descripción por escrito. Lo podéis ver, tanto cómo arriba en enlace, o a continuación, en el botón de ejemplo, que verás más abajo!
Demostración Botones!
Ahora, vayamos a implantarlo en Blogger, por ejemplo!

1. Ves a Blogger
2. Ingresa en Plantilla
3. Ahora en Editar Html
4. Y busca con Ctrl+F la etiqueta ]]></b:skin>
5. Y antes de dicha etiqueta, es decir; ]]></b:skin>
6. Copia y pega el siguiente CSS.
7. Una vez añadido el CSS y el Script, guarda plantilla.

.social {
  border-radius: 30px;
  position: relative;
  width: 150px;
  height: 32px;
  box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  display: inline-block;
}

.social .count {
  width: 58px;
  height: 31px;
  background: url(http://i83.photobucket.com/albums/j295/woratana/bubble.png) no-repeat;
  position: absolute;
  top: 0;
  right: -65px;
  line-height: 31px;
  text-align: center;
  text-indent: 8px;
  font-weight: bold;
  font-size: 14px;
  color: #868686;
}

.social span {
  font-size: 12px;
  color: #fff;
  line-height: 30px;
  display: block;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  margin-left: 30px;
  text-align: center;
  width: 120px;
}

.social .button {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: absolute;
  left: 0;
}

#twitter.social {
  background: #55d4ff;
}

#twitter .button {
  background: #fff url(http://i83.photobucket.com/albums/j295/woratana/twitter.png) 5px 5px no-repeat;
  border: 1px solid #53d4ff;
}

#facebook.social {
  background: #354970;
}

#facebook .button {
  background: #fff url(http://i83.photobucket.com/albums/j295/woratana/facebook.png) 5px 5px no-repeat;
  border: 1px solid #354970;
}

#rss.social {
  background: #db6610;
}

#rss .button {
  background: #fff url(http://i83.photobucket.com/albums/j295/woratana/rss.png) 5px 5px no-repeat;
  border: 1px solid #db6610;
}

#googleplus.social {
  background: #383638;
}

#googleplus .button {
  background: #fff url(http://i83.photobucket.com/albums/j295/woratana/googleplus.png) 5px 5px no-repeat;
  border: 1px solid #383638;
}

Ahora añade el script antes de la etiqueta </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>

<script type='text/javascript'>
$(document).ready(function() {
    $('.count').hide();

    $('.sociallink').hover(
     function() {
      // Set Hover Color
      social_id = $(this).find('.social').attr('id');
      switch(social_id)
      {
        case 'twitter':
          new_textcolor = '#55d4ff';
          new_text = 'Twitter friends';
          break;
        case 'facebook':
          new_textcolor = '#354970';
          new_text = 'Facebook friends';
          break;
        case 'dribbble':
          new_textcolor = '#b73567';
          new_text = 'Facebook friends';
          break;
        case 'rss':
          new_textcolor = '#db6610';
          new_text = 'RSS Subscribers';
          break;
        case 'googleplus':
          new_textcolor = '#383638';
          new_text = 'Google+ friends';
          break;
        case 'forrst':
          new_textcolor = '#315c23';
          new_text = 'Forrst friends';
          break;
      }

      $(this).find('.button').stop().animate({
        'left': '119px'
      }, 700);
       $(this).find('span').stop().animate({
         'margin-left': '5px',
         'color': new_textcolor
       }, 500);
       $(this).find('.social').stop().animate({
         backgroundColor: '#fcfcfc'
       }, 500);

       $(this).find('span').text(new_text);

       $(this).find('.count').stop().fadeIn("slow");

    },
    function(){
      social_id = $(this).find('.social').attr('id');
      switch(social_id)
      {
        case 'twitter':
          new_bgcolor = '#55d4ff';
          new_text = 'Follow on Twitter';
          break;
        case 'facebook':
          new_bgcolor = '#354970';
          new_text = 'Follow on Facebook';
          break;
        case 'dribbble':
          new_bgcolor = '#b73567';
          new_text = 'Follow on Dribbble';
          break;
        case 'rss':
          new_bgcolor = '#db6610';
          new_text = 'Subscribe via RSS';
          break;
        case 'googleplus':
          new_bgcolor = '#383638';
          new_text = 'Follow on Google+';
          break;
        case 'forrst':
          new_bgcolor = '#315c23';
          new_text = 'Follow on Forrst';
          break;
      } 

       $(this).find('.button').stop().animate({
        'left': '0'
        }, 700);
      $(this).find('span').stop().animate({
         'margin-left': '30px',
        'color': '#ffffff'
       }, 600);
      $(this).find('.social').stop().animate({
         backgroundColor: new_bgcolor
       }, 500);

      $(this).find('span').text(new_text);

      $(this).find('.count').stop().fadeOut("slow");
    });
});	
</script>

Por último añade el HTML dónde quieras que se vean:

1. Busca una zona en diseño dónde te gustaría que estuvieran estos botones.
2. Quedaría muy bien en la sidebar o en el footer, es una sugerencia.
3. Ves a Diseño de Blogger.
4. Y añade el siguiente HTML en Añadir un Gadget.
5. Luego Html & Javascript, y copias y pegas.

<div class="wrap">
<a href="https://twitter.com/aizumblog" class="sociallink">
  <div id="twitter" class="social" style="background-color: rgb(85, 212, 255);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguir en Twitter</span>
    <div class="count" style="display: none; opacity: 1;">41</div>
  </div>
</a>
<br />
<br />
<a href="https://www.facebook.com/AizumBlog" class="sociallink">
  <div id="facebook" class="social" style="background-color: rgb(53, 73, 112);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguir en Facebook</span>
    <div class="count" style="display: none; opacity: 1;">303</div>
  </div>
</a>
<br />
<br />
<a href="http://feeds.feedburner.com/aizumblog/TgZy" class="sociallink">
  <div id="rss" class="social" style="background-color: rgb(219, 102, 16);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Suscribe vía RSS</span>
    <div class="count" style="display: none; opacity: 1;">33</div>
  </div>
</a>
<br />
<br />
<a href="https://plus.google.com/+Aizumblog" class="sociallink">
  <div id="googleplus" class="social" style="background-color: rgb(56, 54, 56);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguir en Google+</span>
    <div class="count" style="display: none; opacity: 1;">221</div>
  </div>
</a>
<br />
<br />
</div>

Por último, cómo es obvio, cambia las URL del código HTML de mis redes sociales, por las tuyas. Y también, cambia la numeración de cuantos seguidores tienes en cada cuenta de cada red social, de forma manual. Y como siempre, no os olvidéis de añadir la línea jQuery si la necesitáis, si ya tenéis jQuery en vuestra página, omitir ese paso. Por favor si os gusto, éste tutorial, no os descuidéis de seguirme en las redes sociales, para estar informado de mis últimas publicaciones y actualizaciones, muchas gracias por seguirme. Enjoy!

Get free premium widgets for your blog and website.