Cómo cambiar la cabecera en blogger

Cómo poner una imagen en la cabecera en blogger.

Ya tienes tu blog, te has dado de alta en blogger, has elegido una de las plantillas y tienes tu blog funcionando pero no te gusta la cabecera y quieres cambiarla.

Cambiar la cabecera en blogger es muy fácil y en este tutorial te vamos a explicar cómo hacerlo.

En el blog de ejemplo estamos utilizando la plantilla sencillo de blogger y en principio no tenemos ninguna imagen en la cabecera.

tutoriales-y-cursos-webmaster-cmo-cambiar-la-cabecera-en-blogger-tutoriales-y-cursos-webmaster-cmo-cambiar-la-cabecera-en-blogger

Una de las cosas que necesitas saber antes de poner una imagen en la cabecera es el tamaño de esa imagen, si la haces demasiado grande se te va a salir de los límites del blog y  si la haces pequeña no quedara bien. Te cuento como lo hago yo, además de esta forma puedes hacerte una idea de cómo quedará antes de subir la imagen.

Cómo cambiar la cabecera del blog paso a paso:

 

1.Haz una captura de pantalla para saber el ancho de tu blog y poder ajustar el tamaño de la cabecera.

2. Abre la imagen de la captura en un editor de imagenes (photoshop, gimp, fireworks, paint…)  y recorta el espacio donde va a ir la cabecera, el tamaño del recorte te dará el ancho de la imagen que tiene que tener tu cabecera

3.Una vez creada la imagen de la cabecera ahora tienes que subirla a blogger para ello tienes que entrar a blog y en abrir el desplegable de las opciones del blog para ir a plantilla.

tutoriales-y-cursos-webmaster-cmo-cambiar-la-cabecera-en-blogger-tutoriales-y-cursos-webmaster

4. Ahora tienes que hacer click en diseño. A la derecha te saldrán unos recuadros pincha en editar en el recuadro que pone (cabecera).

tutoriales-y-cursos-webmaster-cmo-cambiar-la-cabecera-en-blogger-tutoriales-y-cursos-webmaster-cambiar-la-cabecera-en-blogger-diseo
 
tutoriales-y-cursos-webmaster-cmo-cambiar-la-cabecera-en-blogger-tutoriales-y-cursos-webmaster-cambiar-cabecera-del-blog

5. Si no tienes ninguna imagen te saldrá un cuadro de diálogo como el de abajo, este cuadro de diálogo sirve para poner el título del blog, el título lo puedes poner como texto o integrado en la cabecera como parte de la imagen, la siguiente casilla es imagen, si el blog ya tiene asociada una cabera te saldrá la imagen en pequeño, antes de subir la nueva tienes que eliminar la que tienes, debajo de la imagen te saldrá la opción para hacerlo. Si tu blog todavía no tiene cabecera tienes que subir la imagen y puedes hacerlo directamente desde tu ordenador, dale a seleccionar archivo y busca la imagen en tu ordenador para subirla a blogger, cuando la hayas subido te saldrá la imagen en pequeñito.

tutoriales-y-cursos-webmaster-cmo-cambiar-la-cabecera-en-blogger-tutoriales-y-cursos-webmaster

Lo siguiente es decirle la ubicación si el título lo tienes puesto con texto tienes que elegir la opción detrás del título y la descripción.
Si has puesto el título de tu blog como parte de la imagen tienes que elegir la opción en lugar del título y la descripción. En mi caso he puesto el título con texto así que selecciono la opción detrás del título y la descripción.  Para terminar antes de guardar puedes darle a reducir hasta ajustar para que la imagen que subas se ajuste al tamaño que tienes definido en la cabecera (esto sólo sirve cuando la imagen es más ancha que el tamaño que tienes definido) ahora le damos a guardar y listo ya sólo queda comprobar cómo ha quedado.

tutoriales-y-cursos-webmaster-cmo-cambiar-la-cabecera-en-blogger-tutoriales-y-cursos-webmaster

Video tutorial cómo poner una cabecera en blogger

Resumen del video:

En el video se explica cómo subir una imagen desde el ordenador para usarla de cabecera, cómo quitar la barra de navegación que poner blogger por defecto en la parte superior, cómo ajustar el ancho de la página para que la cabecera quede bien y cómo ajustar el título de la cabecera para personalizarlo y ajustarlo. 
El código que usamos en el video para ajustar el título y centrarlo es el siguiente:
Esta es la etiqueta  html que se corresponde con el título del blog: 
h1{ margin-left:90px; margin-top:25px;}
Si pones una descripción en la cabecera puedes ajustarla después con el siguiente código, siguiendo las instrucciones que hemos dado en el video para la etiqueta anterior, o sea añadiremos además de la etiqueta correspondiente al título el siguiente código:
 
.header .description { margin-left:90px; margin-top:25px;}
Puedes ajustar los números para adaptarlos a tu cabecera, también puedes poner números negativos, ejemplo:
.header .description { margin-left:90px; margin-top: -25px;}

Random Posts

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*
*