El Perro de Papel Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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



VISTO HASTA AHORA:
Presentación.
Tu Idea.
Glosario Básico.
Header y Fondo.
Configuración Básica.
Las apariencias.
¡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 (si no veremos cómo hacerlo cuando personalicemos la sidebar)
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!





Fuente: este post proviene de El Perro de Papel, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cómo revivir tus viejos posts

El mes pasado te hablé de qué era contenido evergreen (los posts que no pierden relevancia y que siguen generando tráfico a tu blog forever and ever), así que hoy me toca explicarte algunos trucos par ...

Recomendamos

Relacionado

internet blog blogger para dummies ...

Blogger para Dummies: Crear tu Blog en Blogger

INAUGURAMOS NUEVA SECCIÓN Tutoriales Blogger para Dummies. Creo que es una sección muy necesaria teniendo en cuenta la cantidad de emails con dudas básicas que recibo cada día. Nunca se me había ocurrido que alguien que cayese aquí por casualidad quisiese aprender a crear su blog desde cero... Y aunque en mi apartado de Cursos tratamos este tema, he pensado que sería buena idea hacer un blog desde ...

internet blog blogger para dummies ...

Tutoriales Blogger para Dummies: Glosario Básico para ser Blogger

VISTO HASTA AHORA: Presentación. Tu Idea. Glosario Básico. Seguro que si recuerdas tu primer día como blogger... has sonreído al leer la frase de la imagen. Y es que todas hemos empezado de cero. Ya sabes, nadie nace aprendido. Y todo se aprende con la práctica. Así que si llevas poco tiempo en este mundo blogger o estás pensando en abrir tu propio blog, seguro que este tutorial soluciona muchas ...

internet blog blogger para dummies ...

Tutoriales Blogger para Dummies: Configuración Básica

VISTO HASTA AHORA: Presentación. Tu Idea. Glosario Básico. Header y Fondo. Configuración Básica. ¿Ya estás más relajada? Tu blog ya va cogiendo forma ¿verdad? Y lo más importante no es eso, sino que lo estás haciendo tú sola, es la mejor forma de hacer las cosas. Así, si vuelves a tener la genial idea de abrir un blog... ¡ya sabes los pasos a seguir! ¿No es estupendo? Algo positivo teníamos que sa ...

internet blog blogger para dummies ...

Tutoriales Blogger para Dummies: Header y Fondo

VISTO HASTA AHORA: Presentación. Tu Idea. Glosario Básico. Header y Fondo. Has llegado hasta aquí, despacio y con buena letra. Parece que tus ideas empiezan a aclararse un poco y entiendes mejor de qué va todo esto. Aun así, sigues pensando que todo es mucho más complicado de lo que te parecía al principio. Tu blog sigue teniendo un aspecto horrible, naranja chillón. Es verlo... ¡y te dan ganas de ...

internet blog blogger para dummies ...

Tutoriales Blogger para Dummies: Tu Idea

Un buen día se te enciende la bombilla mientras lees un blog de cocina para aprender a hacer tarta de manzana y decides que tú también quieres compartir lo que sabes con el resto del mundo a través de internet. Vale, sabes que quieres hacer tu blog en blogger ya que es la plataforma que usan la mayoría de blogs que lees. Pero ¿y ahora qué? Vamos por pasos.EL TEMA DE TU BLOG Lo más importante si qu ...

internet blog blogger para dummies ...

Tutoriales Blogger Dummies: La Sidebar

VISTO HASTA AHORA: Presentación. Tu Idea. Glosario Básico. Header y Fondo. Configuración Básica. Las apariencias. La sidebar. ¿Qué? ¿estás contenta con los avances? ¡Porque son muchos! Cuando empezamos, el pasado 11 de abril, no tenías ni idea de lo que era un blog... ¡y mira ahora! Lo has hecho todo tú solita. Vale que yo te he ido acompañando pasito a pasito para que no te pierdas... ¡pero lo ha ...

internet blog blogger para dummies ...

Tutorial Blogger Dummies: Buenas Prácticas

Hemos llegado al final de esta serie de tutoriales para crear un blog en blogger para Dummies. Si has seguido el paso a paso de las 9 entradas ¡seguro que ya tienes un blog estupendo con el que adentrarte en este universo blogger! No solo hemos visto cómo personalizarlo y ponerlo a nuestro gusto, sino que hemos empezado desde la base: cuando surge la idea y tenemos que seleccionar la temática y no ...

internet blog básico ...

2 tips para profesionalizar el diseño de tu blog

El diseño, como ya hemos comentado por aquí más de una vez, es importante. ¡Muy importante! Es lo primero que verán tus nuevas visitas de ti. Así que si quieres tener un blog profesional además de compartir contenido valioso, cuidar tus textos y tus fotografías... necesitas dedicar un poco de tu tiempo a profesionalizar el diseño de tu blog. Para hoy he preparado dos tips muy sencillitos para ayud ...

general tips

Crea contenido visible para tu blog/web

Hoy día todos necesitan crear contenido visual extraordinario, si no lo haces lo mas probable es que estas out, a la gente se le enamora con la vista, lo primero que ven es lo primero que los atrae, es como enamore a mi esposo, bueno un poco, por que a El lo enamore por la pansa, pero esa es otra historia. También vamos a ver una web que me intereso mucho y que puede ayudarte a que tu blog/web so ...

internet blog blogger para dummies ...

Tutorial Blogger Dummies: La Plantilla HTML

Para no tener ni idea de cómo hacer un blog de blogger cuando empezamos esta serie de tutoriales, tu blog no está nada mal ¿no crees? Limpio, profesional, cuidado... si has seguido todos los pasos que hemos ido viendo, puedes estar muy satisfecha del trabajo y horas invertidas en poner tu blog bien bonito tu sola. Puedes repasar lo que llevamos visto aquí: VISTO HASTA AHORA: Presentación. Tu Idea. ...