Revista Ilustración

Aprende a Diseñar tus Entradas IV

Por Celia Espada García @ElPerrodePapel
Aprende a Diseñar tus Entradas IV
Visto hasta ahora:
1.- El título. Ver Aquí
2.- Redacción, estilo y ortografía. Ver Aquí
3.- Videos e Imágenes. Ver Aquí


Hoy vamos a tratar el último de los cuatro puntos con los que empezamos esta serie: 

4.- La optimización del diseño de las entradas en Blogger. 

Que no es otra cosa que esos pequeños detalles que hacen que la lectura de nuestras entradas sea más amena.

Este tema es muy extenso, así que comenzaremos hablando hoy de los títulos ¿vale? 

Ya hemos visto la importancia de usar un buen título y como podemos decorarlo con una imagen al principio del mismo:

Elegir el título de mis entradas.

Poner un icono en el título de mis entradas.

Empezaremos por resolver una duda de Nelebka. En la entrada en la que hablamos sobre los iconos, ella preguntaba si era posible poner una imagen diferente en cada título. ¡Es posible! Y vamos a ver como hacerlo de una manera muy sencilla.


Cómo poner una imagen diferente en el título de cada entrada del blog

1.- En la pantalla de edición de nuestra entrada, situamos el cursor en la parte del título y añadimos delante el siguiente código:

<img src="URL DE NUESTRO ICONO"/>

Necesitamos tener nuestra imagen subida a dropbox, picasa o similar, para añadir el enlace a la misma donde te he indicado.

Así:
Aprende a Diseñar tus Entradas IV


2.- Escribimos el título normal de nuestra entrada y si vamos a Vista Previa, el resultado será éste:


Aprende a Diseñar tus Entradas IV

De esta manera tan sencilla, podemos poner el icono que queramos delante del título de cada una de nuestras entradas de forma independiente. Las imágenes pueden ponerse en cualquier parte de tu título, no tiene por qué ser al principio.

Otra opción para darle un toque original al título es añadirle diferentes colores, vamos a ver como hacerlo.

Cómo añadir diferentes colores al título de las entradas del blog


1.- En la pantalla de edición de entradas, escribimos nuestro título en la zona donde iría el texto de la entrada.
Aprende a Diseñar tus Entradas IV

2.- Le aplicamos en Vista Redacción el formato que queramos.
Aprende a Diseñar tus Entradas IV

 3.- Pasamos a Vista HTML y copiamos el código que aparece entre:

<div dir="ltr" style="text-align: left;" trbidi="on"> </div>

En mi caso sería.

Escribir <b><span style="color: #0c343d;">aquí </span></b>el <i><span style="color: #e06666;">texto de la entrada</span></i> que queremos <u><span style="color: #20124d;">colorear</span></u>

4.- Lo pegamos en el título de nuestra entrada y en Vista Previa podemos ver el resultado antes de guardar/publicar.


Aprende a Diseñar tus Entradas IV

5.- ¡Y listo! Ya tenemos un título que llama la atención por su originalidad y que despertará la curiosidad de nuestras nuevas visitas.

Espero que te sea muy útil. ¡Ya me contarás!
¿Quieres recibir mis actualizaciones en tu email?*Click AQUI para apuntarte*
¿Te ha resultado interesante esta entrada?
¡¡Compártela en tus redes sociales!!
Puede que a alguno de tus contactos también le resulte útil 
Gracias ♥

Volver a la Portada de Logo Paperblog