Tutoriales Blogger para Dummies: El Diseño de tu Blog

¡Genial! ¿Eres consciente de todo lo que has avanzado ya? Has pasado de no tener ni idea de qué es un blog a tener una idea clara, entender los términos básicos necesarios para desenvolverte con soltura en este nuevo mundo digital y además has empezado a personalizar y configurar tu nuevo blog para adaptarlo a tu gusto. ¡No te desanimes que vas muy bien!

Hoy vamos a perfeccionar nuestro diseño, pero tranquila, que de momento no vamos a tocar la plantilla HTML, vamos a hacerlo todo desde el Diseñador de Plantillas para que no te agobies demasiado. Mi objetivo es que tengas un blog bonito hecho por ti misma, no saturarte con demasiada información y que tires la toalla antes de empezar.

Así que prepárate un café, té, refresco o lo que quiera que tomes para relajarte y ¡vamos a por el nuevo tema! Las Apariencias. Porque el diseño de tu blog sí que importa. ¡Y mucho!

Actualmente tu blog luce así: hemos personalizado el header, el fondo y los tipos de letra de:

• Las entradas.
• Los títulos de las entradas.
• Los títulos de los gadgets de la sidebar.
• Los títulos de las pestañas del menú superior de páginas.

Vamos a seguir adelante. Empezaremos por los colores y para ello seguimos la siguiente ruta dentro de nuestro panel de administración de Blogger:

Plantilla - Personalizar

Estás de nuevo en el Diseñador de Plantilla. El gran amigo de tus inicios como bloguera.

Y vamos a Avanzado.

LOS ENLACES

En tu blog puedes enlazar otras páginas tuyas o externas, cuando editemos nuestra primera entrada te contaré como hacerlo. ¡Verás que fácil!

Pero esos no son los únicos enlaces que hay, si bajas un poco para ver la vista previa de tu blog verás cuadrados punteados rojos enmarcando lo que blogger considera como enlaces.

• El título de tus entradas. Al hacer click sobre ellas desde la página principal verás tu entrada en vista completa, por eso se considera un enlace.
• Tu nombre, la hora, el enlace a comentarios y las etiquetas al final de tus entradas.
• Tu perfil de Google Plus si lo has habilitado.
• Las entradas de tu Archivo. 

• Los enlaces a las páginas de tu blog.
• La suscripción a tu feed (esto lo veremos también, respira).
• La atribución de tu Blog (con la tecnología de Blogger)

Todo lo que al pinchar encima te lleve a otra parte se considera un enlace y puedes personalizar los colores desde esta opción del Diseñador de Plantillas. 

Color del enlace: color normal de los enlaces de tu blog. Elige uno de tus colores corporativos que contraste con el texto de tus entradas, así es más sencillo distinguir los enlaces para tus visitas.

Color del enlace visitado: muy útil para que tus visitas distingan los enlaces que ya han visitado y los que no. Elige un color diferente al anterior.

Color del enlace cuando se coloca el ratón sobre él: puedes elegir el mismo que en el caso de enlaces visitados (si quieres que resalte) o el del color normal (para que no haya cambio de color al pasar el ratón), así no saturas tu diseño de mil colores.

TEXTO DE LA PESTAÑA

Las diferentes pestañas del menú superior de páginas de tu blog también podrían considerarse enlaces, pero blogger las distingue por si quieres darles un color diferente para que destaquen del resto de contenido.

Esto puedes hacerlo desde: Avanzado - Texto de la Pestaña.

Color del texto: color del texto de las pestañas en estado normal.
Color seleccionado: color del texto de la pestaña de la página seleccionada o activa. La página activa es en la que te encuentras en ese momento.

FONDO DE LAS PESTAÑAS

Desde Fondo de las Pestañas puedes elegir el color de fondo de las pestañas de tu menú superior de página.

Color de fondo: color normal de fondo de las pestañas.
Color seleccionado: color de fondo de la pestaña seleccionada o activa.

Yo suelo dejar ambos con el color blanco, para que se lea bien el contenido de la página. Recuerda que lo que quieres es que te lean y te entiendan... así que cuidado a la hora de combinar colores.

LA FECHA DE TUS ENTRADAS

En la opción Cabecera de Fecha puedes elegir el tipo de letra, color del texto y de fondo para el campo de la fecha. Recuerda que lo más importante es el título de tu entrada así que para la fecha utiliza un color diferente y un tamaño más pequeño ¿vale?

PIE DE PÁGINA DE LA ENTRADA

Hemos llegado a un punto importante que en muchos blogs está sin personalizar... y queda horroroso. El fondo gris que incorpora blogger por defecto al pie de las entradas queda fatal... Así que vamos a personalizarlo usando nuestros colores corporativos.

Color de la sombra: es una fina línea que aparece al final del pie de tus entradas.

LOS GADGETS DE LA SIDEBAR

Desde Gadgets puedes cambiar el color del título de los gadgets de tu sidebar. Y de los triangulitos de Archivo.

Color del título: color del título de los gadgets.
Alternar color: color de los triángulos que aparecen al inicio de cada entrada de tu Archivo.

LOS ACENTOS

Son esas finas líneas grises que aparecen por defecto para separar:

• Las pestañas de tu menú superior de páginas.
• La sidebar de tus entradas.

Aquí puedes elegir otro color o ponerlas transparentes para que no se vean. Yo siempre los elimino para tener un blog mucho más limpio.

Color de la línea del separador: acento entre entradas y sidebar.

Color del contorno de las etiquetas: acentos de las pestañas del menú superior de páginas.

Cuando termines, recuerda pinchar en el botón naranja de arriba a la derecha : APLICAR AL BLOG. ¡O perderás todos tus cambios!

Mucho mejor ¿verdad?

Por cierto, hoy has estado muy callada... ¿no te estarás desanimando?

Que no, que estoy tomando nota... que luego se me olvida... te hablo, te despistas y no me cuentas todas las cosas...

Ah vale, pues genial. Me parece perfecto, una alumna muy aplicada. ¡Pues ya hemos terminado con el tema de hoy!

PRÓXIMA MISIÓN: Organizando la Sidebar

FECHA: 28 DE JUNIO

Hablaremos sobre:

• Qué gadgets son importantes y por qué.
• Configuración de etiquetas, entradas populares y suscripción por correo.
• Los Gadgets HTML/Javascrip.

Y recuerda que si quieres compartir con nosotros cómo elegiste el diseño de tu blog usando el Diseñador de Plantillas puedes editar una entrada en tu blog y dejar el enlace en comentarios. ¡Entre todas aprender es más divertido!

VISTO HASTA AHORA:

• Presentación.
• Tu Idea.
• Glosario Básico.
• Header y Fondo.
• Configuración Básica.
• Las apariencias.
• La sidebar.
• La Plantilla HTML.
• Buenas Prácticas.

¡Por cierto!

¿Sabes que ya puedes reservar una valoración gratuita del diseño y optimización tu blog?

No te quedes sin saber qué puedes mejorar: CLICK AQUÍ

---

¡HOLA EMPRENDEDORA!

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

DESCARGA GRATIS MI GUÍA DE MARKETING EMOCIONAL

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

APRENDER AHORA