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:
![Crear icons sociales con font awesome y códigos CSS, se ve muy cute en tu blog y es muy fácil de hacer no hace falta que seas un experto en Css, estilo 1](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqbhkNXTtBMGU5cGMijBnqNslu4vkFVPVN9qw1pKkJ9vwrCTIeH7Fi3vp3hz2NCfHd7ISSKPvtGc7Y7YkaYEwePuZ-iIlHf9ij3ElSqa_wqSmqpYWfWJKHbmx_QATlOVxdVteCsRLv8A/s1600/icons-social-font-awesome.jpg)
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
![Crear icons sociales con font awesome y códigos CSS, se ve muy cute en tu blog y es muy fácil de hacer no hace falta que seas un experto en Css, estilo 2](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqbhkNXTtBMGU5cGMijBnqNslu4vkFVPVN9qw1pKkJ9vwrCTIeH7Fi3vp3hz2NCfHd7ISSKPvtGc7Y7YkaYEwePuZ-iIlHf9ij3ElSqa_wqSmqpYWfWJKHbmx_QATlOVxdVteCsRLv8A/s1600/icons-social-font-awesome.jpg)
.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
![Crear icons sociales con font awesome y códigos CSS, se ve muy cute en tu blog y es muy fácil de hacer no hace falta que seas un experto en Css, estilo 2](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmVl0mB5Ye1TW7nUPS4UspdlnDKTI2BzKvbtdc5cXU35latKOjhFPXE9QsXRnmf49v3mdaIdDNRuXNlUaOsNkI4JyLjbd__EneCV8x5Mh6eI8b3rjtkRo51IgghgjbjRLd-i6KbEI-og/s1600/icons-social-font-awesome.jpg)
.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!
Hola!
ResponderBorrarSuper chulo este tutorial!
Me ha encantado, además que queda un resultado precioso.
Gracias por compartirlo.
Besos
muchas gracias que bueno que te haya gustado :)
BorrarGracias por compartir el tutorial :) , lo tomaré en cuenta aaah y tanto tiempo sin pasarme por aquí <3 saludos <3
ResponderBorrarQue bueno que regreses :D .. gracias por tu comentario ♥
BorrarAhhh *O* Que lindo! No sabía de la existencia de esa fuente para usar en el blog /°A°\ jeje
ResponderBorrarMuchas gracias por compartir con tutorial y todo >3<//
Espero estés super bien~ Abrazos *3*~
Muchas gracias linda :D .. que bueno que te haya servido ♥
BorrarYo soy una patosa total en el htlm, así que muchas gracias por el tutorial. Besitos.
ResponderBorrarYo también era así pero con la práctica se aprende :D ... saludos!
ResponderBorrarBuen tuto :) casi no se en blogger. Pero no solo se puede con redes sociales si no tambien otras fonts más, se ven muy bien en el blog c:
ResponderBorrar