Cómo hacer listas con iconos de colores en Blogger

diciembre 27, 2015


Programa listas con iconos de colores en Blogger

Esta entrada surgió también en la fanpage, tuvo buena respuesta y me decidí a cambiarla por otra sobre marketing que tenía preparada. Llevamos ya un tiempo sin publicar tutoriales sobre blogger y este detalle que voy a compartir contigo hoy es muy original, además de sencillo, verás que si ya has tocado la plantilla HTML y tienes nociones básicas de programación, no te cuesta nada diseñar tu primera lista bonita en Blogger.

A mí me encantan las listas, creo que es una forma muy visual y creativa de mostrar ideas, proyectos, beneficios, características... y todo lo que se te ocurra. Desde la presentación de un curso hasta los ingredientes de una receta o los materiales de un proyecto de manualidades. Y presentarlo de esta forma siempre llamará más la atención que si usas las aburridas listas predefinidas de puntitos negros de blogger ¿no crees?



¿PARA QUÉ ME SIRVEN ESTE TIPO DE LISTAS?


Para llamar la atención de tus lectores sobre ideas importantes.

Para enumerar los ingredientes de tu receta, el temario de tu último programa o los materiales para realizar la manualidad que acabas de publicar.

Para mostrar los beneficios emocionales o características de tus productos.

Para darle un toque original y diferente a las entradas o páginas de tu blog.

Y seguro que se te ocurren mil opciones más, solo tienes que revisar las entradas que ya tienes publicadas y verás que puedes usarlas en muchas de ellas.




¿CÓMO EMPIEZO A USARLAS?


Muy sencillo. Este tipo de listas funcionan con una tipografía especial que tienes que instalar en tu plantilla HTML para que empiece a funcionar y puedas utilizarla en tus páginas y entradas.

El enlace que activará tu nueva tipografía es el siguiente:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Instalarlo es muy sencillo:

Ve a PLANTILLA - EDITAR HTML.

Pincha dentro del cuadro del código, en cualquier parte, no te preocupes, no pasará nada, es solo para poder activar el buscador interno de la plantilla, no el del navegador.

Ahora pulsa a la vez las teclas: Control y F.

En la cajita del buscador escribe: ]]></b:skin>

Justo debajo pega el enlace para activar la nueva tipografía que te copié antes. Este:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Guarda los cambios.


LAS PRIMERAS PRUEBAS


Ahora que ya está instalada, vamos a ver cómo funciona. Abre una página en blanco o una entrada, vamos a hacer pruebas para que veas qué sencillo es utilizarlas.

En esta página puedes ver todos los iconos disponibles:



¡Hay más de 600! Y se actualiza periódicamente. Para que aparezca el dibujito, hay que escribir la palabra que aparece a la derecha y que te he marcado en rosa en la foto de arriba.

Vamos a hacer una prueba en una entrada del blog ¿vale? Pasa a vista HTML.

Copia:


<i class="fa fa-music"></i>     AQUÍ TU TEXTO.
<br />
<i class="fa fa-paw"></i>     AQUÍ TU TEXTO.
<br />
<i class="fa fa-umbrella"></i>     AQUÍ TU TEXTO.



Si pasas a vista REDACTAR se verá así:



No te preocupes, en vista REDACTAR no se ven los iconos. Para comprobar que efectivamente los iconos están ahí, pincha en VISTA PREVIA.

¡Ahí están!

Para aumentar el espacio entre las diferentes líneas puedes añadir más <br /> en VISTA HTML o situar el cursor al final de la línea y pulsar Intro las veces que quieras.

Por ejemplo:


<i class="fa fa-music"></i>     AQUÍ TU TEXTO.
<br /><br /><br />
<i class="fa fa-paw"></i>     AQUÍ TU TEXTO.
<br /><br /><br />
<i class="fa fa-umbrella"></i>     AQUÍ TU TEXTO.



Para dejar más espacio entre el icono y el texto, solo tienes que pasar a VISTA HTML y añadir el código &nbsp; por cada espacio en blanco que quieras añadir.

Por ejemplo, aquí he añadido tres:


<i class="fa fa-music"></i>&nbsp; &nbsp; &nbsp;AQUÍ TU TEXTO.
<br /><br /><br />
<i class="fa fa-paw"></i>&nbsp; &nbsp; &nbsp;AQUÍ TU TEXTO.
<br /><br /><br />
<i class="fa fa-umbrella"></i>&nbsp; &nbsp; &nbsp;AQUÍ TU TEXTO.




Y si necesitas añadir más líneas, es muy fácil, solo tienes que añadir otro fragmento de código al final del que ves. Así:


<i class="fa fa-music"></i>&nbsp; &nbsp; &nbsp;AQUÍ TU TEXTO.
<br /><br /><br />
<i class="fa fa-paw"></i>&nbsp; &nbsp; &nbsp;AQUÍ TU TEXTO.
<br /><br /><br />
<i class="fa fa-umbrella"></i>&nbsp; &nbsp; &nbsp;AQUÍ TU TEXTO.

<br /><br /><br />
<i class="fa fa-rocket"></i>&nbsp; &nbsp; &nbsp;AQUÍ TU TEXTO.



¿Qué te parece? ¡Ya tienes más de 600 iconos que puedes utilizar para llenar de vida y color tu web!


¿COLOR? ¿DÓNDE ESTÁ EL COLOR?


Ahora vamos a eso, es el detalle final. Y tenemos que añadir un pequeño fragmento de código por cada nuevo icono que vayamos a utilizar en nuestra plantilla HTML.

Voy a enseñarte a dar color a los que acabamos de utilizar para el ejemplo, pero verás que es muy sencillo añadir tus propios iconos con el CSS para darle color.


Entra de nuevo a tu plantilla HTML y abre el buscador interno.

Escribe: ]]></b:skin>

Justo encima pega:



.fa-music {
color: #DB79FC;
padding-right: 10px;
}

.fa-paw {
color: #91BD09;
padding-right: 10px;
}

.fa-umbrella {
color: #8FE1D8;
padding-right: 10px;
}

.fa-rocket {
color: #F78181;
padding-right: 10px;
}

Si lo guardas así, el resultado será:



¿PERO QUÉ SIGNIFICA EL CÓDIGO?


Vamos a desglosarlo y seguro que lo entiendes enseguida.


.fa-music {
color: #DB79FC;
padding-right: 10px;
}

music: es el nombre del icono. Aquí tendrás que poner el que vayas a utilizar.

color: el código HEX del color con el que quieres colorear tu icono. Puedes utilizar tus colores corporativos o extraer el que quieras de ESTA WEB.

padding-right: el espacio que quedará entre tu icono y el texto de la derecha, es otra opción a utilizar el código del espacio en blanco que vimos antes.


¿A qué no era tan complicado? Puedes añadir todos los fragmentos de código que quieras y utilizar tantos iconos como necesites. Una vez instalados y configurados en la plantilla, actuarán como una fuente más.

Espero que te haya gustado la entrada de hoy, es un detalle que yo utilizo mucho junto a las cajas flotantes y los bordes de colores que puedes ver en gran parte de mis páginas y entradas. Queda muy original y, como te decía, llama la atención y mantiene el interés de tus lectores. Además de facilitar la lectura de tus entradas si, como yo, utilizas mucho texto.


Si te animas a usarlo, no olvides pasarte por aquí, dejarme tu enlace y contarme qué tal te ha ido







¡HOLA EMPRENDEDORA!

¿Cansada de pasar tantas horas delante del ordenador sin ver resultados?


DESCARGA GRATIS MI GUÍA DE MARKETING EMOCIONAL + PLANTILLA PROFESIONAL PARA BLOGGER

Aprende a conectar con tu público ideal
¡Y DISFRUTA DE TU TIEMPO LIBRE!


RESUMEN SEMANAL


Cada Viernes Novedades en tu Correo: Últimas entradas, novedades y noticias sobre blogging, marketing y emprendimiento.


Powered by ConvertKit

Te encantará:

25 pensamientos ¡falta el tuyo! ;)

  1. mola mucho, lo usare fijo... yo hasta la fecha utilizo los del teclado numérico, pero estos molan mil... saludines

    ResponderEliminar
    Respuestas
    1. Molan más... ¡y hay muchos más!

      Ya me contarás qué tal, guapa :)

      ¡Besos!

      Eliminar
  2. Yo ya utilizo esos iconos para mis redes sociales, deberia volver a instalar un codigo diferente en la plantilla pa usarlos todos?. Muchas gracias por el tuto. Un beso.

    ResponderEliminar
    Respuestas
    1. Fíjate qué versión tienes instalada, lo pone en el enlace: font-awesome/4.5.0/

      En el tutorial usamos la versión 4.5.0 que es la más actual y la que tiene nuevos iconos, solo tienes que cambiar los numeritos si tienes una versión anterior e ir actualizando para poder utilizar todos los iconos :)

      ¡Besos!

      Eliminar
  3. Me encanta!! Me has leído el pensamiento que andaba mirando como hacerlo. Muchas gracias por el tutorial. ¡¡Feliz Navidad!!

    ResponderEliminar
    Respuestas
    1. ¡Genial, Lourdes! Me alegro mucho de haber acertado jejeje

      Ya me contarás qué tal ;)

      ¡Besos!

      Eliminar
  4. Vaya, se echaban de menos tutos así en el blog. Por fin han vuelto!!!
    Lo probaré, a ver qué tal.
    Gracias.
    Besotes ^^

    ResponderEliminar
  5. Buenas Celia, lo he hecho. Primero sin color y me sale todo ok.

    Luego hice la segunda parte con color, escogí 5 iconos les puse el color que quería y los instalé en la plantilla, en html como indicas.

    Ahora para usarlos en una entrada, ¿cómo lo tendría que hacer para que ya me salgan en el color que yo escogí? ¿Tengo que darle a alguna parte de la entrada? Gracias ^^

    ResponderEliminar
    Respuestas
    1. Cuándo metes un color en la plantilla HTML afecta a todos los iconos de ese nombre, así que deberían cambiar los que usaste en color :)

      Por ejemplo, si pongo la huella de perro rosa (paw), cada vez que use i class="fa fa-paw" aparecerá en color rosa

      ¡Gracias a ti! :)

      Eliminar
    2. Hola Celia, mira esto lo pongo en la plantilla HTML, justo encima de ]]>.

      .fa-book {
      color: #ff6799;
      padding-right: 10px;
      }

      Guardo plantilla, me voy a la entrada y en html pongo:

      i class= "fa fa-book" EL TEXTO. (con los signos mayor, menor)

      Me sigue saliendo en negro, no en el color que puse. Seguro es una tontería pero no doy con ella.

      Gracias de nuevo. =)

      Eliminar
    3. Pues si lo haces como me comentas debería funcionar. Prueba a deshacer todos los cambios y empezar de nuevo, tal vez sea alguna comilla... porque a mí me funciona siguiendo los pasos del tutorial :)

      Beso!

      Eliminar
    4. ¡Hecho Celia!

      Deshice todo y volví a hacerlo y ya me sale el color.Gracias.
      Una duda más: si el mismo icono lo quiero en negro y color, tendría que eliminar uno o pueden estar los dos en la plantilla html?
      G
      racias de nuevo. =)

      Eliminar
    5. Solo puede ponerse de un color: o negro o coloreado, ya que el ID es único y no puedes aplicarle dos propiedades diferentes :)

      Eliminar
    6. Pues muchas gracias, lo estoy usando mucho. =)

      Eliminar
  6. Hola Celia!!, me gusta mucho está idea, siempre he querido personalizar eso en mis entradas y gracias a tí ahora podré hacerlo..

    Mil gracias por compartir tus ideas.

    Besos.

    ResponderEliminar
    Respuestas
    1. ¡Me alegro mucho de que te haya gustado, Yolit!

      Ya me contarás qué tal :)

      ¡Besos!

      Eliminar
  7. Me encanta! Muchas gracias. Los icocos me funcionan genial, pero no puedo ponerle color. He seguido tus pasos y no hay forma.

    Un saludito!

    ResponderEliminar
    Respuestas
    1. ¡Hola, Noelia!

      Prueba a borrarlo todo y a empezar de nuevo, asegurándote de cambiar el código de mis iconos por el de los tuyos para que cojan el color y de cerrar la etiqueta i class="..." para que lo reconozca.

      Los tengo instalados en este blog siguiendo este tutorial y funcionan :)

      ¡Saludos!

      Eliminar
  8. Muchísimas gracias, ya lo he utilizado, es genial. Besos

    ResponderEliminar
  9. Hola Celia, ésto es fabuloso!!!!, ya ensayé los íconos. ¡Me encanta!, ¡me encanta!.
    Muchísimas gracias por compartir tus conocimientos.
    Abrazotes.

    ResponderEliminar
  10. Genial Celia!!!
    Ya lo tengo instalado y lo he usado en varias cositas!
    Muchas gracias!

    ResponderEliminar
  11. Pues a mi no hay manera de que me salga! Lo he instalada según instrucciones y nada :(

    ResponderEliminar
  12. Hola celia, a mi me funciona perfectamente. POrfabor me podrias seguir en mi blog. Graciasss

    www.antelaletra.blogspot.com

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.