eBook Diseñar Las Entradas de Tu Blog

39

description

Libro de diseño de blog, con consejos prácticos, paso a paso, de diseño gràfico

Transcript of eBook Diseñar Las Entradas de Tu Blog

Page 1: eBook Diseñar Las Entradas de Tu Blog
Page 2: eBook Diseñar Las Entradas de Tu Blog

1

Creo que a estas alturas, si ya me conoces un poco, sabes de mi obsesión por

la estética del blog. Uno de los puntos fundamentales es la claridad y

sencillez. Hay millones de blogs y aún más lectores por internet, por lo que la

demanda es muy superior a la oferta... Por eso, si uno de esos lectores cae por

casualidad en tu blog y su apariencia le incomoda, no se lo pensará dos veces

antes de abandonar la página.

En esta serie de artículos que he preparado, voy a centrarme en la apariencia

de nuestras entradas de cara al lector. Recuerda que son solo consejos

basados en mi experiencia y opinión personal, que puede no ser la tuya. No

tienes por qué aplicarlos si ves que no van con la idea que tienes de tu blog.

Page 3: eBook Diseñar Las Entradas de Tu Blog

2

Como elegir el título adecuado para tus entradas

El título es el resumen de tu entrada. Si tu visita no se siente atraído por él, a

no ser que sea un lector habitual, no se detendrá a leerte. Internet está lleno

de información y los internautas van de un blog a otro con una facilidad

asombrosa. Quieren la información que buscan y la quieren ya.

No hay que descuidar este paso ya que es de vital importancia. Un título debe

ser llamativo, captar su atención, despertar su curiosidad y animarle a

leer.

♥ Ahora están muy de moda las listas. Por ejemplo: los 7 aspectos claves para

entender Twitter, haz tu propia tarta de manzana en 5 sencillos pasos, los 7

motivos por los que tu marca personal no es conocida... Y está comprobado

que las listas con números impares despiertan más interés que las de

números pares. Tal vez sea por el tema de la psicología, a tanto no llego.

♥ Otra táctica muy usada es comenzar nuestro título con: Cómo hacer tu

propio... , La mejor forma de...Cuando hacemos una búsqueda en internet,

generalmente buscamos la manera más rápida, sencilla y clara de hacer

las cosas ¿no? Pues es otro punto a tener muy en cuenta al seleccionar el título

apropiado para nuestra entrada.

♥ Sin olvidar las comparaciones de productos: Las ventajas de X frente a

Y, motivos para comprar X en vez de Y, por qué prefiero X y no Y...

Una combinación de éstas puede ser realmente impactante:

* Ejemplo:

7 motivos por los que es mejor hacer una tarta con X harina en vez de con la marca

Y

Mis 5 respuestas a por qué es mejor Blogger que Wordpress

Page 4: eBook Diseñar Las Entradas de Tu Blog

3

♥ No mentir. Esto es palabra de Dios. Ya hemos hablado de la importancia

del porcentaje de rebote para Google. El porcentaje de rebote no es otra cosa

que el número de visitas que encuentran alguna de nuestras entradas a través

del buscador, empiezan a leer, se dan cuenta de que no es lo que buscaban y

se marchan sin terminar de leer la entrada. Pues eso Google lo tiene muy en

cuenta. Como hemos visto en el Curso de Herramientas SEO para Blogger, es

muy sencillo saber nuestro porcentaje de rebote con las herramientas que el

mismo Google nos ofrece.

♥ Google tiene en cuenta los primeros 70 caracteres de nuestro título para

mostrarlo en sus búsquedas, si nos excedemos, aparecerá cortado. Y eso no es

lo que queremos ¿verdad? Así que hay que dedicar el tiempo que sea

necesario a optimizar nuestro título para que quede tal y como queremos que

sea visto a través del buscador.

♥ Keywords. Ya sabes lo que es si has seguido alguno de mis tutoriales gratis

de SEO. Palabras clave. Si ya tienes tu blog un tiempo, seguro que ya has

elegido tus palabras clave, aquellas por la que quieres posicionarte en las

búsquedas. Intenta incluir al menos una de ellas en tu título, si no puede

ser una genérica porque quede demasiado forzada (recuerda escribir para

personas, no para robots), intenta buscar algún sinónimo o grupo de palabras

que signifiquen algo parecido.

♥ Tipo de letra. Utiliza un tipo de letra clara y legible. Las letras con

florituras pueden quedar muy monas para nosotros pero ¿facilitan la lectura?

¿animan a la nueva visita a quedarse y seguir leyendo? Utilizar un tipo de letra

en mayúsculas, clara, que sea sencilla de leer, afecta positivamente al resto de

nuestra entrada. Puedes ver cómo cambiar el tipo de letra de tus títulos para

darle un toque más original en esta entrada sobre como instalar fuentes de

google fonts en blogger.

♥ Adornos al principio y al final. Seguro que has visto varios blogs donde sus

entradas tienen al inicio un corazoncito, hoja de trébol, diamante... Es algo

original y estéticamente no molesta ni incomoda al lector. Puedes usarlo

cuando estés escribiendo el título de tu entrada en el editor, solo tienes que

usar la combinación de teclas adecuada para poner el símbolo que prefieras

en la parte del título elegida. Puedes ver algunos de los símbolos con su

correspondiente combinación de teclas en la entrada como personalizar el

mensaje del formulario de comentarios en blogger.

Page 5: eBook Diseñar Las Entradas de Tu Blog

4

♥ Series de artículos. A veces, un tema da para mucho, por lo que es

aconsejable dividir la entrada en varios artículos más pequeños. Recuerda que

los internautas disponen de poco tiempo y mucha información, por lo que

muchas veces es más positivo centrarse en un solo tema y anunciar el

siguiente para otra entrada. Es aconsejable utilizar el mismo título para

todas las entradas de la serie pero ¿cómo evitar los títulos duplicados?

Usa números romanos, como he hecho yo en la serie de artículos sobre Cosas

que deberías saber antes de empezar tu Blog y en ésta. Google lo reconocerá

como títulos independientes de artículos relacionados y tu lector también.

♥ Ortografía. De vital importancia. Si iniciamos nuestra entrada con una falta

de ortografía en el título, afectará negativamente al resto del artículo. Pasa el

corrector, en Blogger puedes encontrarlo en la pantalla de edición de tu

entrada, a la izquierda, la uve verde con las letras ABC. Se marcarán en

amarillo las posibles faltas de ortografía. Sí, tendrás que invertir unos

minutos más y escribir tu título dentro del cuerpo de la entrada para que el

corrector lo reconozca (luego puedes borrarlo y devolverlo a su lugar original),

pero merece la pena. .

♥ Estilo. Si en tu entrada usas un tono desenfadado y cercano, de amigos, el

título debe ir acorde. Ten en cuenta que el título y la entrada son un conjunto,

se deben complementar entre sí. Usa la misma forma verbal y el mismo

estilo para mantener la uniformidad.

EXTRA: A través de esta página puedes optimizar los caracteres de tu título,

para asegurarte de que son los correctos y está optimizado para ser indexado

por Google.

Estos son mis pilares básicos a la hora de elegir un buen título, por

supuesto, como siempre, hay muchísimos más. Puede que algunos de los que

yo uso no puedas aplicarlos a tu blog, es cuestión de probar y crear tu propia

lista de puntos principales.

Page 6: eBook Diseñar Las Entradas de Tu Blog

5

redacción, estilo y ortografía

♥ Párrafos cortos. Muy importante. Escribe tu entrada de un tirón, tal y como

te venga a la cabeza. Deja que tu creatividad fluya libremente y expláyate con

cada detalle. Deja reposar el escrito o la entrada... y vuelve a ella. Léela las

veces que haga falta y divídela en párrafos cortos, de tres a cinco líneas, sin

que pierda sentido. Es mucho más sencillo de leer y tu lector te agradecerá el

tiempo que inviertas en esta tarea.

♥ Separa el grano de la paja. En pocas palabras, elimina todo el contenido

adicional que hayas añadido cuando estabas inspirado. Pule tu entrada hasta

que trate sobre el tema central que has escogido. Si crees que alguno de los

temas secundarios que has retirado es lo suficientemente importante y guarda

relación con la entrada actual, menciónalo de pasada y programa otra entrada

para tratar ese tema. Además de perfeccionar tu entrada del día, tendrás tema

para la siguiente.

♥ Elige el tono que vas a usar y hazlo durante toda la entrada. Formal,

informal, cercano, desenfadado, analítico... Todo sirve. Pero es aconsejable ser

coherente para no despistar al lector. Recuerda que no son tus amigos de toda

la vida, esos que pillan tus indirectas a la primera y saben por dónde vas.

♥ Haz listas originales como éstas para amenizar la lectura. Esto ya lo hemos

hablado en otras entradas. Es importante dejar respirar al lector. No

amontones palabras en párrafos kilométricos. Usa tablas como las que vimos

en esta entrada para dar color y dinamismo a la lectura, utiliza negritas,

cursivas, colores, intercala imágenes. Y, sobre todo, no olvides dejar párrafos

en blanco. Sobre todo si tus entradas tienen más texto que fotos, como ésta

que estás leyendo.

♥ Cuida la ortografía. Recuerda que tus lectores no te oyen, te leen. ¡No les

dejes ciegos! Lo tienes muy fácil, puedes usar el corrector de Blogger como

ya hemos visto. Una ortografía cuidada transmite seriedad y atención en lo

que se hace. A veces, cuando escribimos con el móvil (yo me incluyo) nos

comemos las tildes y acortamos palabras... pero en el teclado del ordenador

no tenemos excusa.

Page 7: eBook Diseñar Las Entradas de Tu Blog

6

En resumen, dedícale tiempo a la redacción de tus entradas, cuídalas y léelas

las veces que haga falta antes de darle a Publicar. Si eso conlleva que

publiques una vez a la semana, en vez de tres, no te agobies por ello, recuerda

la máxima más importante en el mundo blogger (yo, al menos, la defiendo a

capa y espada):

Calidad sobre Cantidad

Page 8: eBook Diseñar Las Entradas de Tu Blog

7

VIDEOS E IMÁGENES Estoy segura de que si te preocupa el tema del diseño de entradas para

fidelizar a tus visitas y hacerles sentir cómodas en tu bitácora, habrás leído mil

veces la típica frase:

"Las entradas no se escriben, se diseñan"

Pues hemos llegado a un punto clave para el diseño de entradas. Las

fotografías y los vídeos.

Si hemos trabajado bien seleccionando un título adecuado, sugerente, que

llame la atención y hemos cuidado cada detalle del texto de nuestra entrada...

¡no podemos descuidar la estética de nuestros elementos multimedia por nada

del mundo!

Hay millones de blogs en internet por lo que no es raro que muchos de ellos

ofrezcan un contenido similar al nuestro. Teniendo ésto asumido... ¿por qué

iban a leernos a nosotros y no a los demás?

El valor añadido que ofrezcamos en nuestros artículos juega un papel muy

importante que no debemos olvidar.

Consejos para que nuestras fotos llamen la atención

Nítidas y de calidad. No podemos estropear una entrada perfecta con

una fotografía pixelada descargada de Google Imágenes. Una imagen grande,

clara, brillante, llamativa...despertará el interés de nuestras nuevas

visitas.

Nuestros lectores de siempre, aquellos con los que mantenemos una relación

de "amistad" y con lo que hablamos en las redes sociales, leerán nuestras

entradas, igual que nosotros leemos las suyas... Pero una nueva visita que

busca algo en particular, si se encuentra una imagen pequeña, oscura,

pixelada... ¡seguirá buscando!

Page 9: eBook Diseñar Las Entradas de Tu Blog

8

Adaptadas al ancho de nuestra entrada. Tanto si las centramos como

si las alineamos a la izquierda, tenemos que cuidar la armonía entre la

fotografía y el texto.

¿Qué conseguimos con ésto?

Apariencia ordenada.

Estética cuidada.

Transmitir el cuidado que ponemos en redactar y diseñar nuestras entradas.

¿Cómo hacerlo?

Ya te conté como redimensionar vuestras fotografías sin perder calidad en

esta entrada:

*Recordar como redimensionar imágenes sin que pierdan calidad*

Pero antes necesitamos conocer el ancho de nuestra entrada, para que la

imagen encaje perfectamente. Vamos a ver cómo hacerlo de una forma muy

sencilla.

1.- Nos situamos en la página de Inicio de nuestro blog. Hacemos clic sobre

nuestra entrada con el botón derecho del ratón y seleccionamos: Inspeccionar

elemento.

Page 10: eBook Diseñar Las Entradas de Tu Blog

9

2.- Nuestra entrada se marcará en azul y podremos ver directamente el ancho

de nuestra entrada, arriba a la derecha.

En mi caso es 730px.

3.- También puedes verlo en la ventana de código que se abre abajo,

buscamos:

<h3 class="post-title entry-title" itemprop="name">

Un par de líneas más abajo, verás:

intemprop="articleBody"

Ese es el cuerpo de nuestro artículo, si te sitúas justo en la línea siguiente te

aparecerá el dato de la imagen anterior.

Page 11: eBook Diseñar Las Entradas de Tu Blog

10

Igual sucede con la ventanita de la derecha, en la pestaña Styles vemos todos

los estilos de nuestra entrada:

Bajando hasta abajo, encontramos la plantilla de nuestra entrada.

Y en la pestaña Computed vemos directamente nuestra plantilla y sus medidas:

Page 12: eBook Diseñar Las Entradas de Tu Blog

11

¡¡Ahora no tienes excusa!! Ya conoces el ancho exacto de tus entradas para

poder adaptar el tamaño de tus imágenes a la perfección.

Adaptar los videos de youtube

Ya sabes cuál es el ancho de tus entradas ¡por lo que adaptar los vídeos

de YouTube es mucho más sencillo!

Ya no quedarán pequeñitos en el centro de nuestras entradas, sino grandes y

bien visibles completamente adaptados a la estética de nuestro blog.

Vamos a ver cómo adaptar las medidas de un vídeo de YouTube para insertarlo

en nuestro artículo.

1.- Buscamos el vídeo y pinchamos en Compartir, abajo a la derecha.

Page 13: eBook Diseñar Las Entradas de Tu Blog

12

2.- Seleccionamos Insertar. Estas son mis opciones por defecto para compartir

vídeos.

3.- Escogemos Tamaño Personalizado en el desplegable Tamaño del Vídeo:

Page 14: eBook Diseñar Las Entradas de Tu Blog

13

4.- Cuando escribamos el ancho, automáticamente se cambiará el alto. Es una

facilidad que nos da YouTube para mantener la proporción adecuada.

5.- Solo queda copiar el código, pasar a HTML en nuestra entrada y pegarlo

donde queramos que aparezca.

Y ¡voilá! Nuestro vídeo perfectamente adaptado al ancho de nuestra entrada.

Si usas un tipo de letra justificado, en vez de alineado a la izquierda como yo,

se apreciará mucho más la adaptación que hemos hecho. Eso ya depende de

los gustos de cada uno.

Page 15: eBook Diseñar Las Entradas de Tu Blog

14

OPTIMIZAR LOS TÍTULOS No es otra cosa que esos pequeños detalles que hacen que la lectura de

nuestras entradas sea más amena.

Ya hemos visto la importancia de usar un buen título y cómo 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 cómo 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í:

Page 16: eBook Diseñar Las Entradas de Tu Blog

15

2.- Escribimos el título normal de nuestra entrada y si vamos a Vista Previa, el

resultado será éste:

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 cómo 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.

Page 17: eBook Diseñar Las Entradas de Tu Blog

16

2.- Le aplicamos en Vista Redacción el formato que queramos.

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.

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!

Page 18: eBook Diseñar Las Entradas de Tu Blog

17

Tipos de letra A estas alturas seguro que ya has asumido que si queremos ser leídos y que

nuestros lectores se sientan cómodos mientras leen nuestras entradas,

tenemos que esforzarnos por facilitarles el trabajo ¿verdad? Es muy sencillo,

solo tenemos que ponernos en la piel del lector e intentar leer una de las

entradas de nuestro blog...

Vamos a hablar sobre algunos puntos que pueden ayudarnos a optimizar

nuestras entradas y hacer más amena su lectura.

¿Te resulta sencillo seguir el hilo del post?

¿Distingues bien el color del texto?

¿El tipo de letra es el adecuado?

...

Si la respuesta a todas las preguntas que acabo de formularte es SI, creo que

no necesitas seguir leyendo. Pero si en alguna has dudado, voy a darte algunos

consejos, siempre basados en mi experiencia personal, para mantener tus

entradas legibles, limpias y entretenidas ¿vale?

Texto oscuro sobre fondo blanco o muy claro.

Yo recomiendo siempre el fondo blanco, ya que da un aspecto más limpio y

profesional. Pero no solo eso, sino que facilita la lectura. Es a lo que estamos

acostumbrados ¿verdad? Solo tienes que mirar cualquiera de los libros que

tengas en casa. Páginas blancas y letras negras ¿a qué sí? Pues si quieres que

tus visitas lean tus entradas con la misma facilidad que leen un capítulo de su

libro favorito ¡pónselo igual de fácil!

Tipo de letra legible.

Empiezo con otra recomendación: Open Sans. Es la que yo uso y la que instalo

en todos los blogs que diseño. Es clara, limpia y legible. Facilita la lectura y a un

tamaño entre 14-18 píxeles es ideal para leer en pantalla.

Page 19: eBook Diseñar Las Entradas de Tu Blog

18

Puedes ver los tipos de letra disponibles en Blogger en:

Plantilla >> Personalizar >> Avanzado

Otras fuentes muy claras que facilitan la lectura son, siempre desde mi punto

de vista:

Nobile

Page 21: eBook Diseñar Las Entradas de Tu Blog

20

Consolas

Josefin Slab

Muy fina y elegante pero para mejorar su lectura es recomendable subirla a 20

píxeles.

Page 22: eBook Diseñar Las Entradas de Tu Blog

21

¡Hay muchísimas! Es cuestión de ir probando diferentes fuentes, tamaños y

colores. Pero teniendo siempre presente que escribimos para ser leídos, no

para que piensen: "¡uy! que letra más bonita... pero no se entiende nada... ¡qué

difícil es leer lo que pone!"

Porque hay otro tipo de letras muy chulas:

Calligraffitti

Dancing Script

Page 24: eBook Diseñar Las Entradas de Tu Blog

23

Lobster

Entre otras muchas que, aunque hay que reconocer que son monísimas y muy

originales, no facilitan para nada la lectura. Usándolas como texto principal de

nuestras entradas, solo conseguimos cansar la vista de nuestros lectores. Y si

encima usamos un color claro... ¡apaga y vámonos!

Estos tipos de letra más decorativos y originales podemos usarlos para los

títulos de nuestras entradas, suelen ser más breves y no queda tan recargado.

En esta entrada ya vimos cómo podemos instalar una fuente original para

el título de nuestras entradas.

Así que recuerda: Original y Diferente sí. Complicado y Extravagante no.

Page 25: eBook Diseñar Las Entradas de Tu Blog

24

Marcar lo importante Hoy vamos a hablar de las negritas, cursivas y colores que usamos para

resaltar nuestros textos. No son solo elementos decorativos, como os

contaré ahora, al menos no para mí. Quiero que tengas siempre muy claro

que todo lo que te cuento en el blog no tiene por qué ser la Verdad

Absoluta. Solo comparto lo que he aprendido y estudiado, eso que a mí me

funciona... Pero puede que en tu caso sea diferente.

¿Qué funciones desempeñan estos formatos en un artículo de nuestro

blog?

Marcan el contenido importante.

Diferencian el tema principal de los secundarios.

Mejoran la estética.

Dan un aspecto más cuidado y elaborado a nuestras entradas.

Ayudan a que el lector pueda escanear nuestro post y saber de qué va a

simple vista.

Son muy útiles para optimizar nuestro blog y mejorar su posicionamiento.

Entre otras muchas, pero éstas son mis Básicas, por llamarlas de alguna

manera. Voy a desarrollar estos puntos un poco más con un ejemplo

práctico ¿vale? Y ya tú decides si quieres usarlas o no en tu blog.

Todos nuestros post tienen un tema principal. Puede ser tu última receta,

el gorrito de lana que has hecho para la hija de tu vecina o el último blog

chulo que has descubierto. Pero claro, no puedes limitarte a escribir tres

líneas, poner dos fotos y ya. Entrada lista para publicar. A no ser que ya

tengas visitas recurrentes y gente a la que le guste realmente lo que

haces... hay que trabajar un poco más nuestro contenido para que sea

de calidad.

Page 26: eBook Diseñar Las Entradas de Tu Blog

25

Imagina que llega una nueva visita a tu blog y encuentra solo entradas en

las que pones:

"Este fin de semana he hecho tarta de manzana"

FOTO

"Estaba deliciosa, ¡no han quedado ni las migas!"

FOTO

"¡¡Feliz comienzo de semana!!"

¿Sinceramente crees que con la cantidad de blogs que hay en internet

volverá? Yo suelo huir de los blogs que tienen tan poco contenido, no me

cuentan nada nuevo... Y si encima el texto es plano... sin usar negritas,

colores o cursivas que me ayuden a seguir el hilo (en el caso de que haya

muuuucho texto)... pues ya sí que no vuelvo nunca más.

Una forma de optimizar la entrada anterior, además de añadir la receta o

algún truco que haga esa tarta de manzana diferente o mejor que las otras

trescientas mil, por decir una cifra, que pueda encontrar por internet,

es marcando lo importante en negrita, por ejemplo:

"Este fin de semana he hecho una tarta de manzana especial con la

receta de mi abuela, la misma que lleva usando ella toda la vida pero

mejorada"

FOTO

"Gracias a mi ingrediente secreto, que puedes encontrar al final de esta

entrada para descargar junto a la receta completa y algunos

consejillos, la textura era muy cremosa ¡no han quedado ni las migas!"

FOTO

Page 27: eBook Diseñar Las Entradas de Tu Blog

26

"Ha sido una manera especial de terminar el fin de semana, con

una receta clásica pero diferente. Y lo mejor de todo es que la hemos

compartido con la abuela, que ha estado estos días con nosotros ¡y le ha

encantado!"

"¿Te animas a probarla y me cuentas?"

Descargar Receta (enlace)

La cosa cambia ¿verdad? ¡Pero solamente lo importante! Las frases que

consideres claves y que quieras que despierten la curiosidad de tu nueva

visita e invitarla a volver. ¡No vale poner párrafos enteros en negrita! Puede

resultar agotador intentar leer un artículo así.

Ahora vamos a analizar nuestro texto y a distinguir lo verdaderamente

importante de lo que también queremos marcar pero es secundario, es

decir, que complementa al tema principal pero no lo suficiente como para ir

en negrita.

"Este fin de semana he hecho una tarta de manzana especial con la receta

de mi abuela, la misma que lleva usando ella toda la vida pero mejorada"

FOTO

"Gracias a mi ingrediente secreto, que puedes encontrar al final de esta

entrada para descargar junto a la receta completa y algunos consejillos, la

textura era muy cremosa ¡no han quedado ni las migas!"

FOTO

"Ha sido una manera especial de terminar el fin de semana, con una receta

clásica pero diferente. Y lo mejor de todo es que la hemos compartido con

la abuela, que ha estado estos días con nosotros ¡y le ha encantado!"

"¿Te animas a probarla y me cuentas?"

Descargar Receta (enlace)

Page 28: eBook Diseñar Las Entradas de Tu Blog

27

El tema secundario se marca en cursiva. Nuestra entrada ya va tomando

un aspecto mucho más profesional y elaborado ¿verdad?

Lo que hemos marcado en negrita es lo más importante, queremos

transmitir que es una receta de la clásica tarta de manzana pero diferente,

más especial, con un ingrediente secreto que la hace mucho más cremosa.

Hemos dejado como secundario que la receta es de nuestra abuela, con la

que hemos pasado el fin de semana y que pueden descargarla al final de la

entrada.

Si te gustan los colores, puedes dar un toque de color a lo verdaderamente

importante, aquello que quieras que llame la atención de la persona que te

esté leyendo y le haga detenerse.

"Este fin de semana he hecho una tarta de manzana especial con la receta

de mi abuela, la misma que lleva usando ella toda la vida pero mejorada"

FOTO

"Gracias a mi ingrediente secreto, que puedes encontrar al final de esta

entrada para descargar junto a la receta completa y algunos consejillos, la

textura era muy cremosa ¡no han quedado ni las migas!"

FOTO

"Ha sido una manera especial de terminar el fin de semana, con

una receta clásica pero diferente. Y lo mejor de todo es que la hemos

compartido con la abuela, que ha estado estos días con nosotros ¡y le ha

encantado!"

"¿Te animas a probarla y me cuentas?"

Descargar Receta (enlace)

Hemos resaltado en color azul: especial, cremosa, clásica pero diferente.

Los tres puntos claves en los que nos apoyamos para diferenciar

nuestra receta de todas las demás. Pero ésto, como te comentaba, no es

solo decorativo o para que nuestros lectores vean que mimamos cada

detalle... También ayuda a nuestras visitas a escanear nuestras entradas.

Page 29: eBook Diseñar Las Entradas de Tu Blog

28

Seamos sinceros. A mí me encanta que entres a mi blog, leas mis entradas y

te quedes un ratito conmigo. Pero también sé que nuestro día a día está

cargado de otras responsabilidades y obligaciones, además de muchos

otros blogs que nos gustan. Por eso intento ir al grano en mis tutoriales,

esquematizarlos y aportar ejemplos prácticos o capturas de pantalla, para

que a simple vista sepas de qué te estoy hablando en esa entrada.

Pues cuando se trata de nuevas visitas, tenemos que esforzarnos más aún.

Si dedica media hora de su día a buscar nuevos blogs... tenemos que

conseguir que los tres minutos que dedique al nuestro, pueda "leer" varias

entradas para que se lleve una buena impresión y nos recuerde. Marcando

lo importante, secundario y puntos clave, podemos conseguirlo.

¿Y cómo puede ayudarnos en nuestro posicionamiento web para aparecer

en las búsquedas de Google?

Muy sencillo, ya tienes tus puntos claves, esos que marcan la diferencia de

tu receta, marcados en negrita. Los robots de Google, esos bichitos que

escanean nuestras entradas y las indexan... ¡no las leen enteras! Y

empiezan de arriba hacia abajo y de izquierda a derecha, por lo que

tenemos que intentar que nuestra palabra clave, el tema principal de

nuestra entrada, aparezca lo más cerca posible del título. Marcado en

negrita y optimizado, es decir, usando <strong></strong> sustituyendo a

<b></b> en la Vista HTML de nuestro editor de entradas.

Marcaremos una palabra/frase clave en negrita usando strong y una

secundaria en cursiva, usando <em></em> sustituyendo el <i></i> que

Blogger usa por defecto para las itálicas. Solo una de cada, las más cercanas

al título y que mejor resuman el contenido de nuestra entrada. En el caso

del ejemplo sería:

<strong>tarta de manzana especial</strong>

<em>receta de mi abuela</em>

Si no sabes cómo marcar las frases claves principales y secundarias, tienes

mucha más información sobre ello en esta entrada:

Optimizar las entradas del blog

¡¡Y ya tendríamos nuestra entrada perfecta y optimizada lista para ser

publicada!! Si además la acompañamos con unas buenas fotos, luminosas,

enfocadas y bonitas... ¡éxito asegurado!

Page 30: eBook Diseñar Las Entradas de Tu Blog

29

Crear una galería de imágenes Hoy vamos a ver la utilidad de las tablas para añadir fotos a nuestro blog. Sí,

podemos añadir fotos sin necesidad de hacer tablas en HTML, pero quedan

una debajo de la otra... ¿qué pasa si queremos poner nuestras fotos en

horizontal?

Así:

Iniciativa de Bloguer@s Fandanguer@s, puedes descargar tu fondo de escritorio

AQUI

Para conseguir poner las fotos de esa manera, he seguido los pasos para crear

tablas en HTML que ya vimos en esta entrada:

Tablas HTML en Blogger

Ahora vamos a aplicar lo que vimos ese día para crear la entrada

de Bloguer@s Fandanguer@s que he usado de ejemplo ¿vale?

Page 31: eBook Diseñar Las Entradas de Tu Blog

30

Para ello, vamos a vista HTML y abrimos nuestra tabla:

Código:

<table>

<tbody>

<tr>

¡Ya está! Tabla abierta. Vamos a insertar nuestra primera imagen. Para ello

necesitamos haberla subido antes a Picassa, Dropbox o similar. Necesitamos la

URL de la foto para poder subirla dentro de nuestra tabla.

Empezamos con nuestra primera celda.

<table>

<tbody>

<tr>

<td></td>

Ya tenemos creada nuestra primera celda, vamos a añadir la imagen.

<img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" />

Border -> 0 Nuestra imagen no tendrá ningún tipo de borde, si quieres

enmarcarla, puedes ver los tipos de bordes que puedes usar en esta entrada.

Height -> 250 Es el alto de nuestra imagen. La mía es de 250px, puedes variarlo

hasta que en Vista Previa quede tal y como quieres.

Target -> _blank Hace que se abra nuestra imagen en una página nueva

cuando pinchan sobre ella.

Width -> 350 Es el ancho de nuestra imagen. Como en el caso de height,

puedes adaptarlo a la medida que quieras.

Page 32: eBook Diseñar Las Entradas de Tu Blog

31

Una vez modificado el código, lo añadimos a nuestra celda, así:

<table>

<tbody>

<tr>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

Primera celda hecha. ¡Vamos a por la segunda! Será la imagen que

aparecerá justo al lado de la que acabamos de añadir.

<table>

<tbody>

<tr>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

Ya tenemos dos imágenes. Para poner fotos en horizontal en blogger, es

importante saber cuál es el ancho exacto de nuestra entrada, si no sabes

cómo mirarlo, hablamos de ese tema en esta otra entrada.

Ahora que sabemos de cuanto espacio disponemos, adaptaremos nuestras

fotos a esa medida para que no se monten encima de nuestra barra lateral.

Vamos a por la segunda fila de nuestra tabla donde pondremos otras dos

imágenes.

Page 33: eBook Diseñar Las Entradas de Tu Blog

32

Cerramos nuestra primera fila:

<table>

<tbody>

<tr>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

</tr>

Y abrimos la segunda:

<table>

<tbody>

<tr>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

</tr>

<tr>

Ahora hacemos exactamente lo mismo con las dos imágenes siguientes:

<table>

<tbody>

<tr>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

Page 34: eBook Diseñar Las Entradas de Tu Blog

33

</tr>

<tr>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

Y cerramos nuestra segunda fila:

<table>

<tbody>

<tr>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

</tr>

<tr>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

</tr>

Antes de comprobar que todo está correcto en Vista Previa, para evitar

que Blogger nos cierre la tabla donde le de la gana, cerramos nuestra tabla:

<table>

<tbody>

<tr>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

Page 35: eBook Diseñar Las Entradas de Tu Blog

34

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

</tr>

<tr>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

<td><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></td>

</tr>

</tbody>

</table>

Pinchamos en Vista Previa:

¡¡Conseguido!!

Page 36: eBook Diseñar Las Entradas de Tu Blog

35

Hemos creado en unos minutos nuestra primera tabla de imágenes para

mostrar en horizontal las fotos que queramos. Así queda mucho más

organizado ¿verdad?

Puedes añadir todas las filas y celdas que quieras, tal y como hemos visto. E ir

añadiendo todas tus imágenes con el mismo formato.

Tal y como está nuestra tabla, al pinchar sobre las imágenes, éstas se

abrirán en grande, pero no nos llevarán a ninguna página.

¿Cómo añadimos un enlace? Muy sencillo. Si pinchas sobre cualquiera de las

imágenes de la entrada que estoy usando como ejemplo, puedes ver que se

abren los diferentes blogs de las blogueras que han participado en la iniciativa

¿verdad? Vamos a ver que código necesitamos.

Código:

<a href="URL DE LA WEB QUE QUEREMOS ENLAZAR"

target="_blank">CODIGO DE LA IMAGEN</a>

Y lo aplicaremos a cada una de nuestras imágenes, quedará así:

<table>

<tbody>

<tr>

<td><a href="URL DE LA WEB QUE QUEREMOS ENLAZAR"

target="_blank"><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></a></td>

<td><a href="URL DE LA WEB QUE QUEREMOS ENLAZAR"

target="_blank"><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></a></td>

</tr>

<tr>

<td><a href="URL DE LA WEB QUE QUEREMOS ENLAZAR"

target="_blank"><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></a></td>

<td><a href="URL DE LA WEB QUE QUEREMOS ENLAZAR"

target="_blank"><img border="0" height="250" src="URL DE TU

IMAGEN" target="_blank" title="TITULO QUE APARECERÁ AL PASAR EL

CURSOR" width="350" /></a></td>

Page 37: eBook Diseñar Las Entradas de Tu Blog

36

</tr>

</tbody>

</table>

¡¡Hemos creado nuestra primera galería de imágenes con enlaces

externos o internos!!

Page 38: eBook Diseñar Las Entradas de Tu Blog

37

Llamadas a la acción Hoy vamos a ver la importancia de las llamadas a la acción en sitios

estratégicos de nuestras entradas. Una llamada a la acción no es otra cosa

que invitar a nuestros lectores a hacer algo. Ese algo puede ser, desde

compartir nuestra entrada en las redes sociales, hasta seguirnos en facebook,

rellenar un formulario o apuntarse a nuestro boletín de noticias.

Si te has fijado en mis entradas, al inicio de cada una de ellas aparece la opción

de compartirlas en facebook y twitter. En la serie de entradas sobre Como ser tu

propio Community Manager, veremos la importancia de estos botones en

profundidad, pero de momento quiero decir que cada nuevo enlace que generas

en las redes sociales, posiciona mejor tu blog en Google.

El contenido de calidad, que es lo más valorado actualmente, es aquél que más

se comparte. Por tanto, si tu entrada es muy compartida, para Google será

sinónimo de calidad.

En mi caso, las llamadas a la acción más importantes son:

Suscribirse al boletín de noticias.

Seguir / Compartir en redes sociales.

Rellenar formularios de opinión, cursos, etc...

Una persona que ha leído tu entrada completamente y ha quedado contenta

con los conocimientos que has compartido, se suscribirá feliz a tu boletín para

recibir contenido interesante directamente en su email o se suscribirá

fácilmente a tus redes sociales para no perderse nada.

Pero, para ello, antes debes de haberte ganado su confianza con tu artículo

y demostrarle qué tienes contenido de interés que ofrecerle.

Page 39: eBook Diseñar Las Entradas de Tu Blog

38

Y la mejor manera de animarles a actuar... es decírselo. Sí, así de simple. Habla

con ellos, pídeles que si les gusta tu entrada la compartan en tus redes sociales y que

si no quieren perderse nada, se suscriban a tus actualizaciones. Sé sincera y directa,

si sienten que eres transparente y honesta, confiarán en ti y no les costará nada

regalarte un par de clics más a cambio de lo que acaban de leer.

No olvides colocar tus iconos de redes sociales al final de cada entrada con

una invitación amable a seguirte, un enlace para que se suscriban a tus

actualizaciones y los botones para compartir en redes sociales. Es una

manera sencilla de conectar con tu comunidad y conocerlos un poco mejor.

RECUERDA:

Texto cuidado y optimizado, facilitando la lectura siempre.

Párrafos cortos, ortografía cuidada, palabras importantes

marcadas para facilitar el escaneo.

Títulos optimizados y que llamen la atención, originales y

diferentes.

Imágenes y Videos optimizados y adaptados a la estética de tus

entradas.

Presentación cuidada de tus imágenes, usando tablas.

No olvides las llamadas a la acción al final de tus entradas, para

crear una comunidad activa en torno a tu blog.

Espero que mi experiencia pueda serte útil y ayudarte a diseñar las

entradas de tu blog. Si piensas en tus lectores antes que en ti, ¡seguro que

lo consigues!

Muchas gracias por tu confianza,

Celia