;  MY LIFE: TUTORIAL BLOGGER PONER ICONOS SOCIALES CON FONT AWESOME

About

24 marzo 2016

TUTORIAL BLOGGER PONER ICONOS SOCIALES CON FONT AWESOME

Bueno pues leyendo la publicación de HELPBLOGGER creo que este modo de poner las redes sociales en nuestro blog es, además de sencillo, un modo bueno para hacer que la carga del blog no sea pesada. Además, los iconos se pueden personalizar simplemente con CSS y si escogemos (como he hecho yo) la opción sencilla, en menos de 15 minutos (ponte 30 para no estresarte si no estás muy acostumbrada a realizar estos cambios), tiene un gadget bonito y útil para que las personas que entran a leer tu blog puedan seguirte en las redes sociales.

El gadget que quedará es similar al que podeís ver en el blog. Digo similar porque dentro de esa sencillez que lo caracteriza podéis modificar tamaños, colores, fondos, formas....

Si queréis la explicación detallada y completa os invito a acudir a la página de helpblogger, eso sí está en inglés, pero muy bien explicado y con muchos detalles que yo me saltaré porque, si me seguís habitualmente, sabréis que yo suelo coger este tipo de cositas y adaptarlas para que nos sean fáciles y nos cuesten poco tiempo.


Bueno empiezo dejando el enlace a la página Font Awesome aunque para lo que yo voy a explicar no os tenéis que descargar nada de ella, pero bueno el mérito del gadget es un 99% suyo por lo que debemos darle la importancia que se merece.

Ahora pasemos a los pasos a seguir, aviso, hay que tocar plantilla pero es tan poquito que no eso no os debe hacer dudar.


  • Vamos a la Plantilla de nuestro Blog y seleccionamos HTML. Buscamos <head> (si damos al CTRL+F nos saldrá un cuadro de búsqueda) (si damos a CTRL+F nos saldrá un cuadradito de búsqueda).
  • Justo DEBAJO pegamos lo siguiente:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />;

  • Guardamos los cambios y esta parte ya está lista (ya os prometí que lo de la plantilla era muy sencillo)

  • Ahora simplemente nos vamos a Diseño y elegimos dónde queremos que salga el gadget.
  • Seleccionamos Añadir Gadget y añadimos uno HTML
  • Copiamos lo siguiente y ahora os sigo contando:

<div id="fawesomeicons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="URL-HERE" title="Bloglovin" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
<a href="URL-HERE" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a>
</div>






  • Pegamos lo de arriba en el gadget HTML que hemos abierto.
  • Seleccionamos aquellas redes sociales en las que tengamos presencia (por ejemplo si no estamos en tumblr pues eliminamos su fila)
  • Cambiamos todas las URL-HERE por cada una de las URL de nuestras páginas de las redes sociales.
  • Guardamos el gadget y seguimos.


  • Nos vamos a Plantilla y en Diseño en el apartado Avanzado añadimos el CSS que nos servirá para personalizar los iconos.
  • Copiamos y pegamos lo siguiente:

#fawesomeicons {

text-align: center;

}

#fawesomeicons a {

background: #background-color

color: #font-color;

display: inline-block;

font-size: 16px;

width: 30px;

height: 30px;

line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}


  • Cambiamos el color colocando los códigos de color que queramos en lugar de las letras que están en rojo (sí que debemos dejar la almohadilla si ponemos números, si ponemos el nombre de color en letra la quitaremos). Puedes acudir aquí para obtener los códigos de colores.


De este modo tendremos los iconos sociales dentro de cuadrados y en el color que hayamos elegido tanto para el fondo como para la fuente.

  • Cambiamos los tamaños de la fuente y del cuadrado que son los que están en fucsia. 
  • Si queremos personalizar más también podemos hacerlo, por ejemplo, redondos como los que tengo yo. Para ello vamos a añadir justo después de margin: 0 1px 6px; siguiente:
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}



El código para que nos quedara redondo quedaría así:


#fawesomeicons {


text-align: center;

}
#fawesomeicons a {
background: #background-color
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: #hover-color;
}
  • Si queremos un recuadro con el símbolo de la red social pero sin fondo, simplemente eliminaremos la fila background: #background-color
 Aquí ya es cuestión de ir jugando con el CSS.



Podemos hacer otras cositas diferentes, lo podéis ver todo en la página de ejemplos de Font Awesome.

Podemos hacer que nuestros iconos estén girando simplemente tendremos que añadir fa-spin.
Por ejemplo, si queremos que el logo de facebook estén girando (en constante giro) nuestra línea del gadget HTML del facebook será así:
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook fa-spin"></i></a>

Os ánimo a mirar las dos páginas que os he comentado y a aprender un poco más sobre el tema.

Un saludo.