Cómo hacer 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:

VER LOS ICONOS DE FONTAWESOME

¡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!

DESCARGAR AHORA

RESUMEN SEMANAL

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

¡Hecho! Revisa tu correo cada viernes y no te pierdas nada.

There was an error submitting your subscription. Please try again.

Tu Correo

Powered by ConvertKit