10 abril 2016

Cómo instalar iconos en el blog para mostrar tus redes sociales

instalar-iconos-en-el-blog-para-redes-sociales

Las imágenes en forma de botones están muy bien, desarrollan tu vena creativa, quedan muy cuquis y todo lo que tú quieras, pero ralentizan la carga de tu blog una barbaridad y más si no sabes cómo aligerar el peso de tus imágenes antes de subirlas.


Así que hoy te voy a contar cómo poner directamente iconos en tu blog y personalizarlos a tu gusto con la aplicación Font Awesome. No sólo vas a aligerar el tiempo de carga, sino que además los vas a poder emplear para hacer chulerías con ellos y lucir un blog más profesional. ¿Estás preparada para darle un make-up remolón a tu blog? pues vamos a ello!








No te voy a descubrir las américas (o quizás sí) porque esta aplicación lleva ya mucho tiempo funcionando y puede que hayas visto algún tutorial. Pero si es así y aún no te has animado, voy a tratar de convencerte. De hecho me he propuesto conseguirlo y te aviso que soy muy cabezota, así que, si no quieres arriesgarte, cierra esta pestaña inmediatamente  .



¿Aún sigues aquí? ok, pues empiezo (no me digas que no te lo advertí).




QUÉ ES FONT AWESOME



Por si aún no la conoces, se trata de una aplicación repleta de símbolos de todo tipo, que una vez instalada te da la posibilidad de incorporarlos fácilmente a tu blog echando mano del HTML y el CSS. Si nada más leer esas siglas, te han dado ganas de salir corriendo, para el carro porque cuando te digo que es fácil, es que lo es, hazme caso que te vas a alegrar.





PARA QUÉ PUEDO USAR LOS ICONOS DE FONT AWESOME



Una vez instalada la cartera de iconos, el límite es tu imaginación, pero  te voy a dar algunas ideas:


  Para sustituir las aburridas viñetas de Blogger a la hora de enumerar opciones, como estoy haciendo yo ahora mismo con estas estrellitas.


  Para poner caritas felices      o tristes      cuando quieres reforzar una emoción


  Para usarlos en botones de llamada a la acción. Ejemplo:


Descárgatelo  


Imprime la receta  


Compra ahora  



  Para sustituir palabras como etiquetas, fecha, entradas recientes y antiguas, etc... Si te fijas, yo los empleo por todo el blog.


  Para crear tus iconos sociales en el sidebar o en el menú


  Para embellecer los títulos del sidebar


  Para crearte un botón de subir o el botón de Leer más, si acortas tus entradas



Esto es lo que se me ocurre ahora mismo (es que a final de semana, las neuronas están desganadas) pero como te he dicho, el límite está en tu imaginación.






CÓMO INSTALAR FONT AWESOME EN MI BLOG




Que, ya te va gustando la historia verdad? venga, pues vamos al lío, verás que no tiene complicación.


Vámonos a Plantilla>Editar HTML (recuerda hacer tu copia de seguridad)


Haz clic en cualquier sitio (dentro de la plantilla) y pulsa CRTL+F para que te salga la caja de búsqueda. Pega <head> dentro de ella y dale a intro.


Añade este código justo debajo:



<link href='//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.css' rel='stylesheet' type='text/css'/>




Guarda los cambios, ya lo tienes instalado. Ahora el siguiente paso es visitar Font Awesome para ver los códigos que vas a usar. Te aconsejo que busques por temáticas, de lo contrario, te pasarás un buen rato haciendo scroll. Por ejemplo, para los iconos sociales deberás seleccionar Brand Icons.


instalar-iconos-font-awesome-en-el-blog





CÓMO USAR LOS ICONOS EN MI BLOG



Vamos con los tutoriales. Te voy a explicar 3 formas  de usarlos en este post, incluyendo la instalación de tus redes sociales en el sidebar y  en el blog privado, podrás ver cómo personalizarlos. Me imagino que ya sabrás, si no es la primera vez que me lees (y si es la primera, bienvenida!) que  publico contenido exclusivo en un blog que tengo reservado para la Comunidad Demo 2.0, en la que están todos los remajetes que se han suscrito al blog. Así que si no te quieres perder nada, apúntate ya, que es completamente gratis y tiene un porrón de ventajas.

En este vídeo vas a ver:

  Cómo poner iconos a lo largo del texto
  Cómo poner iconos para viñetas
  Cómo poner iconos de redes sociales en el sidebar


Bajo el vídeo, tienes los códigos que necesitas para seguir el tutorial.






  Para poner espacios entre texto e iconos, usa esta etiqueta: &nbsp;


  Copia este código y pégalo en la parte de Diseño en un gadget HTML/Javascript:



<center><div class="botones-sociales">
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-pinterest"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-youtube"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-heart"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-google-plus"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-instagram"></i></a>
</div></center>




Si no tienes alguna de las redes sociales que te he dejado, selecciona por completo la línea y bórrala. En el texto azul, debes añadir el enlace que lleve a tu red social.


Ahora le toca el turno, a la personalización de esos iconos sociales, para que se muestren totalmente a tu gusto. En el blog privado te voy a contar:


  Cómo cambiarles tamaño, color y añadir bordes


  Cómo darle a cada icono un color diferente


  Cómo añadir texturas a tus iconos, tal y como yo los tengo en el sidebar



Aquí puedes ver cómo quedan:





¿Aún no te has apuntado? pues te aconsejo que no te lo pierdas, porque las próximas semanas, contaré:


  Cómo diseñar un menú desplegable con iconos sociales y buscador.

  Cómo diseñar botones de acción personalizados, como este:





o este:





  Cómo personalizar con iconos los títulos del sidebar

  Cómo sustituir los textos de entradas antiguas y recientes con iconos

  Cómo crear y personalizar un botón de subir con iconos

  Cómo instalar los iconos en la caja final bajo el post





Y con esto acabamos, espero haberte convencido de la gran ventaja de pasarte a Font Awesome para personalizar tu blog. Si además, te has unido a la Comunidad Demo 2.0, ya me voy pletórica a disfrutar del domingo. Te deseo que tú también lo hagas y ojalá te haya servido mucho la entrada de hoy.



Cómo instalar iconos en el blog para mostrar tus redes sociales.Tuitéalo



¿Conocías la aplicación Font Awesome? ¿qué próximo tutorial de los que te he adelantado tienes ganas de ver primero? ¿Cómo piensas montarte el domingo? ¿me lo cuentas y charlamos un rato?


Que tengas un gran día!




¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:




28 comentarios:

  1. No se, pero a mi se me has descubierto las américas con este post. Cada vez que leo artículos como este me asusto mas del mundo que existe detrás de un blog o una pagina web

    ResponderEliminar
    Respuestas
    1. Jeje, pues no te asustes Erika, aprovecha y sácale todo el partido que puedas =D un beso!

      Eliminar
  2. me hubiera ido super bien cuando empece, gracias

    ResponderEliminar
    Respuestas
    1. Bueno Inma, siempre vamos aprendiendo cosas nuevas, si no es esto, será otra cosa. Gracias por pasarte!

      Eliminar
  3. Muchas gracias por este maravilloso artículo guapa!

    No hay día que no aprenda algo nuevo contigo!

    Un besote!

    ResponderEliminar
    Respuestas
    1. Me alegro un montón de que te venga bien Sann, besotes!

      Eliminar
  4. Hala, pues no conocía la aplicación, pero es súper útil! Este fin de semana la trastearé ^^ Muchas gracias por el tutorial :)
    Un abrazo y pásate cuando quieras :3

    ResponderEliminar
    Respuestas
    1. Espero que le saques partido, gracias a ti por pasarte y dejar tu comentario Utopía!

      Eliminar
  5. A mi también me has descubierto las américas! No tenía ni idea de esta aplicación y con lo cursi que soy y lo que me gustan estas cosas La usaré Seguro!!! 😀 Muuuchas. Gracias guapaaa!! Me encanta tu blog!!! Voy a usmear más en tus anteriores entradas!!

    ResponderEliminar
    Respuestas
    1. Encantada Mónica, rastrea lo que quieras espero que te sea de utilidad, besos!

      Eliminar
  6. Que útil y que chulo queda, a ver si me sale porque soy una torpe para modificar el html jejeje besitos

    ResponderEliminar
    Respuestas
    1. Jeee, no te preocupes, yo también lo era. Los principios de todo son duros, pero si te generan el suficiente interés, terminan por volverse fáciles. Besotes!

      Eliminar
  7. Que maravilla de entrada! ya la tengo guardada en favoritos para mejorar mi blog! Me suscribo ahora mismito para enterarme de todos los truquitos! ;)

    ResponderEliminar
    Respuestas
    1. Muchísimas gracias Pilar, bienvenida a la comunidad. Espero que disfrutas, te sirva y te sientas cómoda en ella. Besos!

      Eliminar
  8. No conozco esta aplicación, espero tener un poquito de tiempo y darle a ella con tus geniales explicaciones. :D :D Feliz semana :D :D

    EW

    ResponderEliminar
    Respuestas
    1. Cuando empieces a manejarla, te va a encantar Liquirizia. Igualmente que vaya bien la semana, besotes!

      Eliminar
  9. Raquel, estas entradas van genial. Cuando una empieza en este mundo necesita estos tutoriales enérgicamente!!
    gracias!

    ResponderEliminar
    Respuestas
    1. Me alegro mucho de que te sirvan Elisa, ojalá te ayuden a conseguir tus objetivos, un beso!

      Eliminar
  10. Cuando conocí Font awesone fue como si me hubiera quitado un peso de encima porque el blog de Blogger me iba más rápido y no me tuve que preocupar más por que iconos sociales quedaban mejo con mi blog. Todo lo que se hace en css es mucho mejor, se acelera el tiempo de carga, se ve mucho más estilizado, y se tiene la opción de cambiar de color cuando se pasa el cursor por encina. La semana que entra te escribo, tengo una propuesta para ti. Un beso

    ResponderEliminar
    Respuestas
    1. Yo me resistí mucho al HTML y al CSS, creí que nunca me iban a entrar en la cabeza y ahora no concibo mi blog sin ellos. Además me cuesta mucho diseñar un blog para alguien que prefiera imágenes, con las posibilidades que tienen los iconos y los códigos! Encantada de que me tengas una propuesta, yo aún no he tenido tiempo de pensar en nada, de lo liada que estoy, pero estoy deseando colaborar contigo. Un besote!

      Eliminar
  11. cada vez que me paso por aquí me doy cuanta de lo que me falta por mejorar en mi blog, gracias por ayudarme a que cada día esté más a mi gusto y más personal. Tengo que probar a cambiar los iconos a ver que tal me queda, bss
    walkingtopennylane

    ResponderEliminar
    Respuestas
    1. Gracias a ti Penny, por el interés que te tomas. Estoy segura de que poco a poco, implementando, vas a notar los resultados. Un beso!

      Eliminar
  12. Como siempre muy útil y muy bien explicado, volveré de nuevo cuando me decida a empezar con las reformas de mi blog. Muchas gracias por molestarte tanto en ponernos las cosas fáciles.

    ResponderEliminar
    Respuestas
    1. Gracias a ti por pasarte Anna, vuelve cada vez que lo necesites, para eso escribo, para ayudaros. Un beso!

      Eliminar
  13. Me encantan estos iconos, yo tengo puestas mis redes con font awesome y me gusta mucho porque veo unos iconos super minimalistas y al mismo tiempo prácticos.
    Un beso :)

    ResponderEliminar
    Respuestas
    1. A mí también me encantan y creo que tienen tantas o más posibilidades que las imágenes. Un beso Vanessa!

      Eliminar
  14. Muy interesante tu post!! hace unos meses me hubiera ido genial ya que no sabia como ponerlos aprendi porque me puse a buscar pero siempre habrá quien lo necesite ahora!! Un saludo!!

    ResponderEliminar
    Respuestas
    1. Bueno, si algo le sobra a este blog, son tutoriales. Seguro que alguno te servirá. Muchas gracias por pasarte Lara!

      Eliminar

demo