Cabecera en móviles para blogs sin cabecera

CTRL+X por Ben6835 

Hace tiempo explicamos cómo eliminar el artilugio Cabecera. Con eso pretendíamos tener libertad para diseñar un encabezamiento mediante código  HTML y salirnos del encorsetado widget. El problema -menor, todo hay que decirlo- para los que quitamos ese widget, es que ahora que existen las plantillas para móviles y estas no muestran imagen alguna.

La causa es que dichas plantillas toman la imagen de este artilugio (Cabecera de página) y por tanto, si no lo tenemos en la plantilla normal, es imposible que se traslade a la plantilla para móvil.

Yo no suelo ver mi página en el teléfono y por eso no me había percatado del asunto, pero para eso tenemos al amigo Felipe de Eurowon, que no sólo nos lo ha hecho saber sino que además nos ha dado la solución mascadita.

---

Vamos a partir del supuesto de que ya tenéis eliminada la cabecera y tenemos un gadget HTML/Javascript que está haciendo esa función.

Lo primero es añadir de nuevo el gadget Cabecera de página, añadir una imagen (la que hará de encabezamiento en la versión móvil) y seleccionar la opción En lugar del título y la descripción. Guardamos los cambios.

Ahora editamos la plantilla con Expandir plantillas de artilugios marcado y buscamos b:widget id='Header1'.

Una vez localizada esa parte, seleccionamos para cortar todo el widget completo, desde la apertura hasta el cierre ambos inclusive:

<b:section class='sidebar' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='TITULO DEL GADGET' type='Header'>
<b:includable id='main'>
...
...
</b:includable>
</b:widget>
</b:section>

Lo único con lo que tenéis que tener cuidado ahora, es con no pasaros de largo cortando. Ir revisando las líneas -son muchas- y os detenéis en el primer cierre de widget (</b:widget>) que encontréis. Las dos líneas grises no las tenéis que tocar y sólo las he puesto cómo referencia. La primera incluso podría ser algo distinta.

Antes de cortar, nos fijamos en lo que hay dentro de title (en verde), porque eso lo tendremos que teclear ahora después en el nuevo código.

Para terminar insertamos todo esto justo dónde quitamos el anterior, entre las dos etiquetas section que ahora veremos seguidas.

<b:section class='sidebar' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='TITULO DEL GADGET' type='Header'>
<b:includable id='title'/>
<b:includable id='description'/>
<b:includable id='main'>
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section&gt;

Cambiamos el title para que sea el mismo que teníamos puesto antes y con Vista Previa comprobamos que todo va bien.

Listo (me dan ganas de decir: ¡Tatachaaaan!). Ahora nuestra página estará como siempre pero si nos metemos en la versión móvil, comprobaremos que nos sale la imagen antes cargada, cuando reinstalamos el widget cabecera.


Para que se entienda lo hecho, lo que hemos insertado en lugar de todo el código del artilugio, es sólo una pequeña fracción de este. Precisamente la parte que Blogger pone ahí para las versiones móviles.

¡Ah! Y si no tenéis un smartphone a mano, podéis añadir a vuestra dirección un ?m=1 y así ver sin esperar más, cómo queda la cosa en un móvil.

http://NOMBREBLOG.blogspot.com?m=1

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter