Aprende como hacer una Barra Social para compartir tus redes sociales desde tu sitio web. – HTML5  y  CSS3

Es muy importante hoy en día y mas que nunca antes tener presencia en redes sociales con tu sitio web, marca o empresa. Es por eso que hoy en este tutorial te enseñare como hacer la famosa barra social vertical que esta fija a pantalla y sigue al usuario a todas partes.

Así que empecemos, el código en realidad es muy sencillo, no necesitamos nada mas que HTML, y CSS asi de simple.

Todo lo que necesitamos es un div con una lista dentro y en cada elemento li una etiqueta a con una clase, pero mejor veamoslo en el código que es mas sencillo entenderlo asi.


<div class=“social”>
<ul>
<li><a href=“http://www.facebook.com/falconmasters” target=“_blank” class=“icon-facebook”></a></li>
<li><a href=“http://www.twitter.com/falconmasters” target=“_blank” class=“icon-twitter”></a></li>
<li><a href=“http://www.googleplus.com/falconmasters” target=“_blank” class=“icon-googleplus”></a></li>
<li><a href=“http://www.pinterest.com/falconmasters” target=“_blank” class=“icon-pinterest”></a></li>
<li><a href=“mailto:ikerg1972@gmail.com” class=“icon-mail”></a></li>
</ul>
</div>

social_icons
Aquí hay varias cosas de que hablar, la primera es que he puesto el atributotarget="_blank" para que cuando el usuario acceda al link este se abra en una nueva pestaña y asi no abandone tu sitio, muchas personas no lo recomiendan pero todo el mundo lo hace.

La segunda cosa que tenemos que observar es la class que le he agregado, cada class repesenta un icono, este icono lo agregamos con fuentes, asi como vimos en este tutorial:

Como utilizar iconos para sitio web mediante fuentes y CSS

Pasemos con el código CSS:


.social {
position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
left: 0; /* Establecemos la barra en la izquierda */
top: 200px; /* Bajamos la barra 200px de arriba a abajo */
z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}

.social ul {
list-style: none;
}

.social ul li a {
display: inline-block;
color:#fff;
background: #000;
padding: 10px 15px;
text-decoration: none;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}

.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
.social ul li .icon-twitter {background: #00abf0;}
.social ul li .icon-googleplus {background: #d95232;}
.social ul li .icon-pinterest {background: #ae181f;}
.social ul li .icon-mail {background: #666666;}

.social ul li a:hover {
background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}


socialmedia

En el código anterior he puesto comentarios explicando mas claramente para que
usamos cada propiedad, pero en resumen lo que hicimos fue establecer una posición fija para la barra con position:fixed; También le dimos a cada elemento a un estilo de botón, le agregamos animaciones e hicimos que cuando el usuario pasara el mouse incrementara el espacio interior del botón y el color de fondo.

Con esto ya lo tendríamos, cabe aclarar una cosa y es que esta barra no funciona si la deseas posicionar a la derecha, puedes quitar left:0; y poner right:0; esto la moverá a la derecha, pero al pasar el mouse tendrás un error, si quieres tenerla a la derecha tendrás que quitarle el padding al hover.

Como hacer una Barra Social (vertical y fija a pantalla) con HTML y CSS3