Parece mentira que ya vayamos por la lección 3 del curso. El tiempo pasa volando sobre todo cuando no paras quieta. Te recuerdo las lecciones anteriores:
Si habéis seguido todos los pasos seguros que os esta quedando una versión móvil super chula y personal. Esta semana vamos a tratar un tema que no es muy popular porque quizás no mucha gente sabe que puedes tener una cabecera distinta y única para tu versión móvil.
Hay blogs que por las características de su cabecera general, la resolución en el móvil es muy mala o directamente no tienes cabecera en la versión pc porque por ejemplo la portada tiene formato de landing page como es mi caso. Como no me gustaba nada como se veía, o más bien, como apenas era legible mi nueva cabecera del blog en el móvil, me puse a investigar de como crear una alternativa. Aquí tenéis los resultados para hacerlo de vamos a ver como puedes hacerlo de dos maneras diferentes.
CABECERA MÓVIL CON IMAGEN
Diseñar una imagen nueva como cabecera solo para móvil te permitirá añadir imágenes, fuentes chulas que tengas en tu pc y una combinación de ambas. Vamos el resultado podrá ser igual que cuando crear una cabecera para tu blog. Solo tienes que tener en cuenta que al diseña la cabecera para la versión móvil en un programa como pickmonkey o photoshop, hacerlo en unas dimensiones adecuadas para mostrarla con calidad en el dispositivo. En mi caso las dimensiones de mi diseño fueron 400×100 px.
Aclarado este tema de diseño, pasamos a instalar la nueva cabecera (que previamente habremos subido a un almacenamiento web) en nuestro blog. ¿Preparado? Recuerda tener el móvil cerca para ir comprobando los paso y que todo el código en rosa lo deberás personalizar con tus datos/gustos. Empezamos…..
Vamos a Plantilla y hacemos una copia de seguridad lo primero. Después la editamos y buscamos el final de la sección </head>. Si bajamos un poquito nos aparecerá las diferentes partes de la estructura del blog.
Se añade un div nuevo en el lugar de la plantilla html donde queramos que aparezca la cabecera. En mi caso lo añadí debajo del código de la barra fija superior como os muestro en la foto:
<div id=’cabecera-movil’><a href=’URL DE LA HOME DE TU BLOG’><img src=»URL IMAGEN CABECERA»/></a></div>
Seguimos en la plantilla y si tenemos un cabecera en el blog que no queremos mostrar en el móvil vamos a Ir al Widget→Header1 (widget correspondiente a la cabecera del blog) y añadimos mobile=»no» donde como en el ejemplo de la foto.
A continuación vamos a ocultar la cabecera-móvil de la versión Pc. Buscamos en la plantilla
]]></b:skin>
Y justo encima pegamos:
#cabecera-movil {display: none;}
Y para terminar añadimos el CSS de la nueva cabecera en la sección mobile del CSS. Buscamos la sección de móvil que empieza con una línea tal que así
/*Mobile
——————————————–*/
Pegamos este código dentro de ella para tener todo el código ordenado
.mobile #cabecera-movil {margin:0 auto; width:90%; padding-top:25px; margin-bottom:-20px; display: inblock !important;}
Sobre width→hace referencia al tamaño que ocupa la imagen en la plantilla móvil. Se puede poner 100% o reducir el tamaño un poco.
Sobre padding→en mi caso la imagen quedaba muy pegada a la barra superior así aumente el espacio.
Sobre margin→ en mi caso quedo mucho espacio entre la cabecera y el menú inferior de páginas así que tuve que reducirlo.
|
| Ver blog en funcionamiento |
CREAR UNA CABECERA SOLO CON TEXTO (NOMBRE DEL BLOG)
También te puede pasar que quieras otra cabecera pero solo quieras mostrar el nombre del blog con una fuente chula que puedas descargar de Google Fonts. Ese este caso debemos crear otro widget para la cabecer (Header2) que solo aparecerá en el móvil. Esta es la opción que tengo yo en mi blog.
Ir a plantilla→editar→Ir al witget→ header1. Copiar justo debajo de donde cierra la etiqueta </b:widget>
<b:widget id=’Header2′ locked=’true’ title=’NOMBRE DEL BLOG’ type=’Header’/>
A continuación buscamos esta línea un poquito más arriba y añadimos mobile=’no’ ya que no queremos que nuestra cabecera del blog de la versión pc salga en nuestro móvil.
<b:widget id=’Header1′ locked=’true’ mobile=’no’ title=’NOMBRE DEL BLOG’ type=’Header’>
Ahora nos queda decirle que muestre nuestro nuevo header2 solo en el móvil. Para ello añadimos mobile=’only’ en la línea de la nueva cabecera que hemos creado al principio:
<b:widget id=’Header2′ locked=’true’ mobile=’only’ title=’Frikymama: Blog de Pruebas (cabecera)’ type=’Header’>
Comprobamos que en la vista previa no hay problemas y le damos a guardar plantilla.
Ahora si todo sale bien, en nuestra versión móvil del blog saldrá el titulo/title que ponía en nuestro Header2, es decir, el título del blog y en la versión Pc nuestra cabecera de siempre.
Añadir CSS a la nueva cabecera
.mobile .header h1 {
text-transform:uppercase; /*Para que esté en mayúsculas, borrad la línea si no lo queréis*/
color:#333; /*Color*/
font: normal normal 20px Sigmar One, cursive; /*Tamaño y tipografía*/
letter-spacing:2px; /*Espaciado entre caracteres, borrad la línea si no lo queréis*/
margin-top:10px; /*espacio hacia la barra superior*/
margin-bottom:10px: /*espacio hacia el menú inferior*/
text-aling: center;
}
.mobile .header h1 a {
color: #333; /*color del texto*/
}
Sobre la fuente/font: Puedes usar las básicas que te da blogger, o las que te hayas descargado de
Google fonts e instalado en la plantilla. En mi caso opté por una fuente llamativa de Google fonts: Sigmar One, cursive.
¿Y vosotros tenéis la misma cabecera en la versión web y móvil? ¿Qué opción os gusta más imagen o texto? Espero vuestra dudas y preguntas en los comentarios. La semana que viene publicaré el último post del curso dedicado a crear y ajustar gadgets a la versión móvil.
¿Te ha sido de utilidad el artículo?
Gracias por compartir Ana Maria, ya voy trabajando al fin en la versión móvil, aun estoy pensándomela si dejo imagen o texto para la cabecera, saludos.
¡Voy a MORIR! ¡GRACIAS! Estaba buscando esto desde hace siglos, no sabes la ilusión que me ha hecho encontrarlo.
¡Un besazo ENORME!
Me alegro que te sirva de utilidad. Por eso me puse con el curso porque yo hace tiempo empeze a seguir otro curso de otra bloguera pero como lo dejo a medias, me las ingenie para hacer el mio propio. Un saludo.
¡Hola otra vez! Ya he seguido casi todos los pasos y mi plantilla está quedando preciosa :D.
Quería preguntarte si se podría poner las imágenes de los posts resumidos en círculos… Lo he buscado pero no he encontrado nada.
¡Un besazo!
Yo lo tengo con un servicio exterior engayeya pero lo ideal sería hacerlo con un código en la plantilla de post relacionados con la etiquetas. Miss Lavanda tiene un tuto sobre eso lo único que a mi hace tiempo que me dejo de funcionar pero a lo mejor a ti te va. Un saludo.
Hola Ana, soy Lidia de Nunca es demasiado dulce, recuerdas que me ayudaste hace unas semanas con lo del menú de paginas de estos tutos? pues bien, ya tengo casi todo listo, solo me falta la cabecera que por algún motivo con el no damos no me la muestra. Creo Aisha estuvo hablando contigo ayer y me dijo que te dejara un comentario. Te comento, el la plantilla web tengo el menu de paginas partido con mi logo, no tengo cabecera propiamente dicha, pero sino recuerdo mal eso está bloquedado para que no se muestre en la plantilla movil, no se si ese será el problema. Se te ocurre alguna forma de solucionarlo? Muchas gracias!!
Hola Lidia, me he pasado por tu blog y veo que has quitada la cabecera integrada en el menú por lo tanto no puedo ver que puede fallar en el código. Lo único que se me ocurre era que aunque tengas bloqueado mostrar la cabecera, al estar unida al menú, se debería de bloquear la sección entera para que funcione. Pero ya te digo que sin ver como esta estructurada la plantilla, no te puedo decir nada seguro. De todas maneras ahora has puesto una cabecera muy chula que sale perfecta en el móvil. Quizás para evitar complicaciones puede quedarte con esta cabecera para ambas vista y luego personalizar el menú en cada sitio. Eso ya es decisión tuya. Un saludo.
Hola!!! me encantan todos tus tutoriales!!!
Estoy intentando poco a poco mejorar la versión movil. He hecho paso a paso lo de la imagen y nada……no sé si será algun error, pero no me sale la imagen.
Otra pregunta ¿se podrían agrandar las miniaturas de la versión movil? asi quedarían entre el titulo del post y los comentarios.
Un saludo.
Marina
Hola! Mi problema con la cabecera es que en el movil se ve borrosa… y no se como modificar el código, para que la misma imagen quede más pequeña… Gracias, Eva.
Hola Eva, el tipo de imagen que tu tienes en la cabecera pierde mucha calidad en la versión móvil. Para no liarte con códigos yo pensaría en subir una imagen más pequeña para el blog o hacer una cabecera diferente para la versión móvil. Un saludo
Hola Ana María, ojalá me puedas ayudar porque me estoy volviendo loca!
Mi blog tiene el tema de Vistas Dinamicas, y en vista móvil seleccioné Personalizado; pero por más que he intentado no logro acomodar la imagen de mi cabecera para que se adapte correctamente a vista móvil.
He seguido tus pasos detalladamente, pero no hay forma, no consigo colocar bien la cabecera 🙁
Serías tan amable de darme alguna idea de que es lo que estoy haciendo mal? o como solucionarlo. Mi blog es: https://dixiera5.blogspot.com/
Muchísimas gracias de antemano!
Hola, Dix. Lo siento pero ya no me dedico a manejar blogger hace tiempo ya que una plataforma un poco obsoleta y muy limitada. Quizás puedas preguntar en el foto oficial de Blogger en google. Un saludo