Si tienes un blog en Blogger y has diseñado una cabecera atractiva para la versión de escritorio, es posible que al abrirlo desde un móvil la imagen no se vea como esperabas. Esto ocurre porque los navegadores móviles, especialmente Safari en iPhone y Chrome en Android, adaptan automáticamente el diseño a pantallas más pequeñas.
En esta guía te explico cómo cambiar o ajustar la imagen de cabecera de tu blog para que se vea correctamente en dispositivos móviles.
¿Por qué la cabecera se ve diferente en móviles?
Los temas de Blogger suelen utilizar diseños adaptables (responsive). Esto significa que:
- La imagen puede recortarse automáticamente.
- Algunos elementos pueden ocultarse en pantallas pequeñas.
- El ancho disponible es mucho menor que en un ordenador.
- Safari y Chrome interpretan ciertos estilos CSS de forma ligeramente diferente.
Por ello, una imagen que luce perfecta en un PC puede aparecer cortada o deformada en un smartphone.
Método 1: Cambiar la imagen de cabecera desde Blogger
Paso 1: Accede al panel de Blogger
- Inicia sesión en Blogger.
- Selecciona tu blog.
- Ve a Diseño.
- Busca el gadget Cabecera.
- Haz clic en el icono de edición.
Paso 2: Sube una nueva imagen
Puedes:
- Subir una imagen desde tu ordenador.
- Utilizar una imagen ya alojada en Internet.
Para una mejor visualización en móviles se recomienda:
- Ancho entre 1200 y 1600 píxeles.
- Mantener el texto importante en la zona central.
- Evitar elementos importantes en los bordes.
Paso 3: Guarda los cambios
Haz clic en Guardar y después en Guardar disposición.
Método 2: Crear una cabecera específica para móviles
Si deseas que la cabecera móvil sea diferente a la de escritorio, puedes hacerlo mediante CSS.
Accede al editor de temas
- Ve a Tema.
- Haz clic en la flecha junto a Personalizar.
- Selecciona Editar HTML.
Antes de realizar cambios, es recomendable hacer una copia de seguridad del tema.
Código CSS para móviles
Añade el siguiente código antes de la etiqueta </head> o dentro de la sección de estilos del tema:
@media screen and (max-width: 768px) {
.Header img {
content: url('URL-DE-TU-IMAGEN-MOVIL');
width: 100%;
height: auto;
}
}
Sustituye:
URL-DE-TU-IMAGEN-MOVIL
por la dirección de tu nueva imagen.
Método 3: Utilizar una imagen de fondo adaptativa
Otra opción consiste en usar una imagen de fondo que se adapte automáticamente al tamaño de pantalla.
@media screen and (max-width: 768px) {
.header-widget {
background-image: url('URL-DE-LA-IMAGEN');
background-size: cover;
background-position: center center;
min-height: 180px;
}
}
Con esta técnica la imagen se ajusta mejor tanto en Safari como en Chrome.
Recomendaciones para Safari y Chrome
En Safari (iPhone)
- Utiliza imágenes en formato JPG o PNG optimizadas.
- Evita archivos superiores a 500 KB.
- Comprueba que el texto de la cabecera sea legible en pantallas pequeñas.
En Chrome (Android)
- Utiliza imágenes de al menos 1200 píxeles de ancho.
- Comprueba que no haya elementos importantes en los extremos de la imagen.
- Borra la caché del navegador después de realizar cambios.
Cómo comprobar el resultado
Después de modificar la cabecera:
- Abre el blog en un iPhone usando Safari.
- Abre el blog en un dispositivo Android usando Chrome.
- Comprueba:
- Que la imagen no aparezca cortada.
- Que el logotipo sea visible.
- Que el texto se lea correctamente.
- Que la carga sea rápida.
Conclusión
Personalizar la imagen de cabecera para dispositivos móviles mejora la experiencia de los visitantes y aporta una imagen más profesional a tu blog. Blogger permite cambiar fácilmente la cabecera desde el panel de administración, pero si buscas un resultado más avanzado, puedes utilizar CSS para mostrar una imagen específica en móviles y optimizar su visualización tanto en Safari como en Chrome.
Una cabecera bien adaptada ayuda a reforzar la identidad de tu blog y garantiza que los lectores disfruten de una experiencia visual atractiva independientemente del dispositivo que utilicen.
¿Has personalizado la cabecera móvil de tu blog? Cuéntanos tu experiencia en los comentarios de Zarabarandula.
