En el siguiente tutorial vamos a crear una bonita y elegante botonera de todas nuestras redes sociales; esta vez no utilizaremos imágenes, sino que más bien utilizaremos las herramienta, característica y efectos CSS3. En lo personal me agrada mucho esta botonera o contenedor ya que hace ver tu blog bonito y agradable. Como mencione no vamos hacer uso de imágenes así que haremos uso de los iconos de Font Awesome Bootstrap.
Ahora si vamos a comenzar con el tutorial para poder poner esta bonita botonera de redes sociales.
Lo primero que debes hacer es agregar la hoja de estilos que nos proporciona las Font Awesome Bootstrap en el documento HTML. Estos estilos nos proporcionan las fonts e iconos que nos ayudará a visualizar las imágenes de nuestras redes sociales.
Nos vamos a nuestro blog, despues a la siguiente ruta: Plantilla – Editar HTML. Ya estando aquí presiona Ctrl + F y buscamos <head>, pega el siguiente código despues de esa etiqueta.
<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css”/>Ahora vamos a definir los estilos CSS, en el cual como primer paso se definirán los estilos para la caja contenedora y los enlaces a la tipografía. En este caso a los iconos, así que le damos el tamaño y lo centramos. Después aplicamos los estilos al boton de fondo blanco, border radius para dar forma redonda y otros estilos para lograr su forma adecuada.
Copiamos el siguiente código CSS y lo pegamos antes de ]]></b:skin>
.caja-redes {
margin: 0 auto;
padding: 15px;
position: relative;
width: 400px;
}
.caja-redes a {
text-align: center;
font-size: 20px;
}
.icon-button {
background-color: white;
border-radius: 3em;
cursor: pointer;
display: inline-block;
height: 3em;
line-height: 3em;
margin: 0 8px;
position: relative;
width: 3em;
}
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 3em;
height: 3em;
border-radius: 3em;
margin: -1.5em;
}
.linkedin span {
background-color: #4393BB;
}
.pinterest span {
background-color: #C92228;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}.icon-button i {
background: none;
color: white;
left: 0;
line-height: 3em;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 3em;
z-index: 2;
}
.icon-button .icon-linkedin {
color: #4393BB;
}
.icon-button .icon-pinterest {
color: #C92228;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {
color: #3B5998;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button:hover .icon-linkedin, .icon-button:hover .icon-pinterest, .icon-button:hover .icon-twitter, .icon-button:hover .icon-facebook, .icon-button:hover .icon-google-plus {
color: white;
}Con todo lo que hemos hecho anteriormente agregamos las fonts y los estilos CSS, ahora lo que resta es colocar el siguiente código donde tu quieras dentro de tu plantilla.
<div class=”caja-redes”>
<a href=”#” class=”icon-button linkedin”><i class=”icon-linkedin”></i><span></span></a>
<a href=”#” class=”icon-button pinterest”><i class=”icon-pinterest”></i><span></span></a>
<a href=”#” class=”icon-button twitter”><i class=”icon-twitter”></i><span></span></a>
<a href=”#” class=”icon-button facebook”><i class=”icon-facebook”></i><span></span></a>
<a href=”#” class=”icon-button google-plus”><i class=”icon-google-plus”></i><span></span></a>
</div>Sustituimos el # por la url de cada una de nuestras redes sociales. Ejemplo:
<a href=”https://plus.google.com/u/0/+TutoEspacio” class=”icon-button google-plus”><i class=”icon-google-plus”></i><span></span></a>Puedes ver como se ve en este blog de pruebas
Espero que este tutorial haya sido de tu agrado y si te sirvio no olvides compartir que nos ayuda de mucho. Visita nuestro Canal en Youtube y Suscribete!.De igual forma puedes dejar tu comentario por si tienes dudas.
No olvides seguir visitando TutoEspacio.