En el tutorial de hoy quiero enseñarles una de las cosas fantásticas cosas que se pueden crear utilizando la fuente Awesome, más unos pocos retoques en css. Por ahora les mostraré como hacer sus propios icons de redes sociales, de una forma bastante rápida y sencilla y sin nececidad de que seas muy bueno editando en Css. Espero que les agrade el tutorial.
Como les prometí aquí les traigo el primer tutorial de unos cuantos que tengo preparados para ustedes ♥
En el tutorial de hoy quiero enseñarles una de las cosas que puedes crear con la fuente Awesome más unos pocos retoques en css.
Por ahora les mostraré como hacer sus icons de redes sociales. Hay otras cosas que se pueden realizar, pero les iré mostrando de a poco.
Bueno acá les pongo un ejemplo para que vean a que me refiero:
Ejemplo
Para colocarlo en tu blog solo tienes que seguir unos pasos muy sencillos.
Paso 1 - Colocar el código HTML
Para agregarlo en tu sidebar solo debes ir a Diseño → Agregar un gadget → HTML/Javascript
En el debes pegar lo siguiente:
<center>
<ul class="side-social">
<li><a href="url" target="_blank" title="Facebook"><e class="fa fa-facebook"></e></a></li>
<li><a href="url" target="_blank" title="Twitter"><e class="fa fa-twitter"></e></a></li>
<li><a href="url" target="_blank" title="Pinterest"><e class="fa fa-pinterest"></e></a></li>
<li><a href="url" target="_blank" title="Bloglovin"><e class="fa fa-heart"></e></a></li>
<li><a href="url" target="_blank" title="Tumblr"><e class="fa fa-tumblr"></e></a></li>
<li><a href="url" target="_blank" title="Google+"><e class="fa fa-google-plus"></e></a></li>
<li><a href="url" target="_blank" title="Youtube"><e class="fa fa-google-plus"></e></a></li>
<li><a href="url" target="_blank" title="Instagram"><e class="fa fa-google-plus"></e></a></li>
</ul></center>
Cambia lo que está coloreado por la url de tus redes. Y guarda (se verá algo feo, pero en unos pasos más mejorará)
Si quieres eliminar alguno de los botones tienes que borrar de <li> a </li>
Por ejemplo si quieres borrar el botón de Pinterest debes borrar todo esto;
<li><a href="url" target="_blank" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>
Paso 2- Colocar la fuente Awesome
Ahora debes ir a Plantilla → Edición HTML y con CTRL + F debes buscar la etiqueta <head>
Debajo de ella debes pegar lo siguiente:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Paso 3- Colocar el código Css
Ya solo nos falta determinar el estilo que tendrán tus redes. Ya estando en la plantilla de tu blog solo tienes que buscar con CTRL + F y pegar arriba el código del estilo que mas te guste y personalizarlo ♥
Estilo 1
.side-social li {
text-align: center;
width: 60px; /* Ancho de la cajita */
background: #ffb0be; /* Color de fondo de la cajita */
text-transform: uppercase;
font-size: 9px;
display: inline-block;
padding: 0;
margin-bottom: 3px!important;
}
.side-social e {
width: 32px; /* ancho de la fuente - tiene que ser menor que el ancho de la cajita */
height: 32px; /* alto de la fuente */
margin: 15px auto 0;
line-height: 100%;
text-align: center;
font-size: 20px;
color: #fff; /* Color del texto */
}
.side-social li:hover {
background-color: #9ccedf; /* Color de fondo de la cajita hover */
}
Estilo 2
.social li {
text-align: center;
width: 50px; /* Ancho del redondo */
height: 40px; /* Alto del redondo */
background: #fcc; /* Color de fondo del redondo */
text-transform: uppercase;
font-size: 9px;
display: inline-block;
padding: 0;
border-radius: 100%;
margin-bottom: 3px!important;
}
.social e {
width: 40px; /* ancho de la fuente - tiene que ser menor que el ancho del redondo */
height: 40px; /* alto de la fuente - tiene que ser menor que el alto del redondo */
margin: 15px auto 0;
line-height: 10px;
text-align: center;
font-size: 20px;
color: #fff; /* Color del texto */
}
.social li:hover {
background: #777; /* Color de fondo del redondo hover */
}
Puse unas etiquetas para que sepas que cambia que, ahora solo editas a tu gusto y listo ♥ Recuerden que si tienten alguna duda pueden escribirme sol.pourcel@gmail.com abrazos!