Botones sociales con efecto Slider

 Ciudadanos! en este regreso a el CSS Y SCRIPT aprenderás como añadir una barra de botones de redes sociales con un efecto poco conocido como lo es el parecido al 'slider', este efecto puede que te parezca asombroso, quizás un poco nuevo o quizás no, pero de lo que si estoy seguro es que no se vera nada mal en tu sitio, aplicable para Blogger, Wordpress entre otros, incluyendo documentos Html. Cabe destacar la importancia de el diseñador de dichos botones o iconos sociales: 'Designil' en Codepen.

  Estos botones lo forman iconos de redes sociales claro está, que se posicionan de forma vertical y que al cursar por ellos se vera el efecto slider de el botón cambiando de posición y mostrando una cantidad manual de lo que refiere a 'seguidores' en cada red social prevista.

  La muestra vale más que mil palabras, a continuación en la demo lo podrás visualizar por ti mismo:

DEMO

 
Lo incorporaremos en tu Blog, y estos seran los pasos que deberas seguir en esta plataforma:

1- Ir a Blogger.
2- Luego a Plantilla.
3- Y a Editar HTML
4- Presionar las teclas Ctrl+f y buscar la etiqueta:  ]]></b:skin> .
5- Pegar antes de dicha etiqueta el siguiente código CSS:

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

   Y por ultimo queda añadir el HTML quien será la estructura de dicha barra vertical, solo constaría de ir a una entrada o mejor, podría ponerse en el Sidebar o footer de tu Sitio, Lo más claro seria que sea un lugar donde se visualice de mejor manera estos increíbles botones...

   Codigo HTML:

<div class="wrap"> <a href="https://twitter.com/998pow" 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;"> 160</div> </div> </a> <br /> <br /> <a href="https://www.facebook.com/CrappoES" 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;"> 2615</div> </div> </a> <br /> <br /> <a href="http://feeds.feedburner.com/998pow/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/+998powBlogspot998pow" 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;"> 5</div> </div> </a> <br /> <br /> </div>

   Hay que resaltar que en el codigo html hay que cambiar mis redes sociales por la de ustedes y de igual manera el número de seguidores que está posea.

   Recuerda también: Si ya tienes la línea de Jquery, omitir ese paso.
 
    Y eso ha sido todo ciudadanos, ya tendrás en tu sitio una barra vertical con botones iconos de redes sociales diferente y muy atractiva ;)

1.  ¿Te gusto el tutorial? → Siguenos en nuestras redes sociales para más!. 
2. ¡Comenta como te ha ido!.

¡Compártelo!

Tweet