29 abr. 2016

Tutorial Blogger : Plantilla de Blogger - Configuración -C3-P2

  • 9:00
  • por
Configuración de Plantilla en Blogger

Hola de nuevo, y bienvenidx a la 3ª clase de este curso gratuito de Crea tu blog desde cero. En esta segunda parte vamos a configurar el apartado de Plantilla de Blogger.

Al final del post encontrarás, como siempre, el vídeo tutorial por si quieres ir modificando en directo, que si pause, que si play, y así enterarte de todo.

Trataremos modificaciones básicas con las que en siguientes clases podamos trabajar los cambios de forma visualmente fácil y además porque, como ya sabes, este curso está previsto para hacer/crear una plantilla en concreto. Una vez creada la plantilla y finalizado el curso, podréis seguir haciendo pequeños cambios, tras lo aprendido y con más tutoriales que comparto. Pudiendo siempre utilizar las clases que queráis como recurso de apoyo para vuestra propia personalización, claro!

Comienzo de la clase

Una vez que estamos en nuestro panel de Blogger vamos a ir a Plantilla y una vez allí vamos a fijarnos en 2 cosas importantes antes del siguiente paso relacionado con la plantilla.

Primero tenemos que saber qué es eso que aparece a la derecha arriba, que pone Crear/Reestablecer copia de seguridad. Es una parte muy importante porque la usaremos a menudo. Concretamente siempre antes de modificar la plantilla a través de código HTML. 
Además esto, junto a exportar tu blog, es algo que te vendrá genial cuando lleves ya ciertas publicaciones y cambios, por lo que pueda pasar.

Si le damos a Crear/Restablecer copia de seguridad podemos ver que tenemos varias opciones;

Por un lado: 

Plantilla  ›  Crear/Restablecer copia de seguridad

Antes de editar la plantilla, te recomendamos que guardes una copia de ella.
Descargar plantilla completa
Y por otro:

Sube una plantilla desde un archivo de tu equipo.


Seleccionar Archivo
Subir


Así en Descargar podremos hacer la copia de seguridad, guardando nuestra plantilla (que no las entradas) y en Seleccionar Archivo nos da opción a cargar una plantilla que hemos descargado anteriormente, o que hemos conseguido en archivo. Lo que necesitamos más es Descargar plantilla completaAcuérdate siempre de guardarla antes de hacer cambios en plantilla HTML.


El otro detalle a tener en cuenta antes de ir a Personalización , es la plantilla móvil, en el vídeo explico cómo queremos tenerla, pero por defecto viene de la mejor manera. Solo es un apunte que necesitas conocer.

Aparte de esto, y a modo de interrupción de clase, ya te comento en el vídeo que tenemos que crear una entrada (Si no tenemos todavía ninguna, claro!) para poder ver mejor aquellas personalizaciones que vamos a realizar en plantilla. Si ya tienes pues nada, pero, fíjate que tengas algún enlace y alguna foto en alguno de tus posts publicados.

Ahora si, vamos a Personalización en el apartado de Plantilla en El blog ahora y haremos lo siguiente:

En Plantillas, donde aparecemos por defecto, vamos a elegir en Sencillo, la segunda, la blanca.

En Fondo lo dejamos como está.

En Ajustar Ancho le daremos en 

 Blog completo  a 1000px 


 Barra lateral derecha  a 300px 

En Diseño vamos a cambiar solamente el  Diseño de pie de página  al estilo de un solo bloque horizontal.

*IMPORTANTE: Cuando modificamos la estructura del Diseño, nos varía el Ancho del blog, así que si has hecho algún cambio aquí, tendrás que volver a Ajustar Ancho y volver a poner los valores del punto anterior a este.


Llegamos al punto más latoso, donde quizás te tengas que parar más, y seguramente más adelante vuelvas a cambiar algo. No pasa nada, está ahí para eso, para cambiar cuando quieras, lo que quieras.

Avanzado:

Texto de la página : yo he elegido para esta plantilla unos colores de una paleta de colores concreta que verás en la siguiente clase, en este vídeo pongo un "rojo" solo para mostrarte las opciones de diseño que tienes. Si no tienes claro los colores no pasa nada, aquí aprendes a manejar esta parte de tus opciones de diseño de plantilla, así que más tarde podrás volver y editarlo.

Fuente : PT Sans Narrow

Color : 
#666666



Fondo : todo en transparente y/o blanco.

Enlaces: (imagenes aproximadas al original formato de Blogger)

Color del enlace
#a5c7b2 

Color de enlace visitado
#8fb59e 

Color del enlace cuando se coloca el ratón sobre él
#c1d7de 



Título del blog: puedes ponerlo como quieras , en la siguiente clase veremos que no vamos a usar esta opción, si no que añadiremos una imagen de cabecera.

Descripción del blog: lo mismo que en lo anterior.


Texto de pestañas: lo veremos cuando vayamos a añadir el menú de páginas debajo de la cabecera, así que lo podemos dejar.

Fondo de las pestañas: lo mismo que en lo anterior.


Título de entrada: puedes elegir el tipo de letra que quieras , junto al tamaño que consideres. Yo he elegido.
Fuente: Cousine
Tamaño: 24px


Cabecera de fecha: lo que he elegido finalmente ha sido ;

Color del texto
#a5c7b2 

Color de fondo
transparent



Fuente: Courier
Tamaño: 11px


Pie de página de la entrada:

Color del texto

#666666


Color de fondo
transparent 

Color de la sombra
transparent 


Gadgets:

Fuente del título


Courier





Tamaño: 16px

Color del título
#8fb59e 

Colores de esta plantilla







Colores recomendados
















Alternar color
#c1d7de 

Colores de esta plantilla







Colores recomendados

Imágenes: aquí podemos ponerles bordes de forma automática a todas las imágenes, pero personalmente no lo recomiendo, así que lo dejo en transparente. Queda, sin embargo, una sombra en las imágenes que aprenderemos a eliminar en posteriores clases.

Color de fondo
transparent 

Color del borde
transparent 

Color del texto de las leyendas
#666666 











Acentos: es , entre otras, la línea que separa sidebar y entradas.

Color de la línea del separador
#a5c7b2 

Color del contorno de las etiquetas
transparent 


Has aquí se termina, porque el resto, Mobile Buttom Colors y Añadir CSS, de momento no lo necesitamos.


vídeo-tutorial de apoyo y como complemento





fin de la clase

Espero que te haya resultado sencillo, y que te aporte mucho. No te olvides de compartir y comentar para que este blog siga latiendo :)

En la siguiente clase, en su primera parte,  veremos cómo diseñar nuestra cabecera con unas técnicas muy sencillitas. Si no tienes logo te ayudará a sacar ideas para crearlo, y si ya tienes te ayudará a complementarlo para crear tu cabecera ideal.


Curso gratis paso a paso para crear un blog y diseñarlo a tu gusto con videotutoriales

Blogger paso a paso Mónica Lemos

Me apasiona la educación, en su sentido más amplio. Son muchos mis centros de interés, por ello creo que ser Blogger o Youtuber es una oportunidad de compartir lo mejor de cada persona al mundo. Mientras estoy intentando evolucionar 'educadamente' en esta 'loca' sociedad. Desde este rincón puedo ayudarte con asesorías y servicios ¿Te animas?

Comenta dudas, opiniones...



Ya han comentado 4 veces:

  1. Hola Monica gracias por compartir tus tutoriales y experiencias. Me han ayudado mucho a organizar mi blog, (aun lo sigo armando ) ya que lo arme viendo muchos tutoriales de diversos exponentes. Quisiera saber si sera posible modificar el cajón de comentarios de blogger, me esta pasando que cuando quieren hacer un comentario, obliga al visitante a registrarse en blogger, me gustaría que puedan comentar sin tantas restricciones , colocar solo nombre, correo y comentario. Gracias de antemano, saludos.

    ResponderEliminar
    Respuestas
    1. Hola, en la configuración de tu blog puedes configurar eso. mira bien los tutoriales y los vídeos ahí te lo explico. Un saludo

      Eliminar
  2. Hola, Mónica.
    He comenzado con el curso y, como ves, estoy todavía en la configuración de la plantilla. De momento, todo marcha bien, pero en el vídeo de esta clase pasa una cosa rara. No sé si es culpa de mi ordenador o del propio vídeo. Ocurre que, a partir del minuto 9:05, se queda la imagen bloqueada y el sonido continúa funcionando con normalidad.
    En otro orden de cosas, me planteé, a la hora de empezar, ir siguiendo las clases y aplicando lo aprendido al blog que ya tenía a medio hacer, pero he decidido crear uno nuevo y partir de cero para no liarme.
    Un saludo y siempre gracias por tu generosidad.

    Jorge.

    ResponderEliminar
    Respuestas
    1. Hola Jorge, el error debe ser tuyo, por que el vídeo se reproduce sin problema. Genial que crearas uno de pruebas para ir trasteando y probando y practicando con el curso. Ánimo!!

      Eliminar