sábado, 14 de noviembre de 2015

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:



 

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:



  Ahora añade el SCRIPT antes de la Etiqueta </HEAD>




   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:




   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!


0 comments :

Blogger Template by Daniel Galindo
})();