SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
CONSEGUIR LO QUE QUIERES

NUNCA FUÉ TAN FÁCIL

Si quieres conseguir ciertos cambios en tu blog, renovar el diseño, arreglar algún problema, instalar alguna plantilla que te crea problemas...¡Puedo ayudarte! Envíame un e-mail a [email protected] y hablemos.

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


29 abr. 2016

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

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.





   

No hay comentarios
© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.