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?
(Votos: 0 Promedio: 0)

Pin It on Pinterest