Cabecera en móviles para blogs sin cabecera | Oloblogger CTRL+X por Ben6835   Hace tiempo explicamos cómo eliminar el artilugio Cabecera . Con eso pretend...

18 de noviembre de 2011

Cabecera en móviles para blogs sin cabecera

CTRL+x
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
Copy URL

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

follow us in feedly

13 comentarios :

  1. jajajaja, me mató la imagen del jinete, jajjajaja.

    buena información...

    ya que estamos hablando de "cabeceras" podrías enseñarnos a ponerle una imagen en la cabecera y al pie de un gadget, como el gadget que tienes (ciber-cafe)

    un saludo olobloman, ya tienes 41 +1, realmente tienes muchos seguidores, saludos hermano.

    ResponderEliminar
  2. Nombrado en el blog del gran Oloman. Me siento como si me hubiesen concedido el Pulitzer :)

    ResponderEliminar
  3. Es un poco largo de explicar, Chiknaui.Mikistli Joel Molina Reyes, pero para eso están este post y los dos siguientes ;)

    Felipe OI, encantado de que te lo parezca pero lo de "gran" me queda idem :D

    ResponderEliminar
  4. muchas gracias! Sigue funcionando ya a estas fechas :D

    ResponderEliminar
  5. Es lo que estaba buscando para solucionar el problema de la cabecera, gracias me ha ido genial.

    ResponderEliminar
    Respuestas
    1. Uy, me acabo de dar cuenta que no va como quería, de todas maneras gracias siempre aprendo algo por aqui

      Eliminar
  6. Pues siento decir que lo he hecho paso por paso y nada :( no me sale

    ResponderEliminar
    Respuestas
    1. En tu caso, que la imagen de cabecera está en el centro y no en la barra lateral, lo más sencillo sería añadir un gadget "Cabecera del blog" con la imagen que forma el título de tu blog y allí añadir esa imagen. Luego simplemente eliminas el gadget que ahora mismo tienes para ese mismo fin.

      Eliminar
  7. Lo he vuelto a intentar y esta vez si me sale la imagen en la versión movil....

    Añadí el gadget cabecera del blog.....pero no se adapta al ancho de la pantalla en el móvil...se sale hacia la derecha.....

    ResponderEliminar
    Respuestas
    1. Lo acabo de ver en un móvil y si te refieres a http://www.mivestidodelentejuelas.com/, se ve correctamente.

      Vas necesitando una plantilla adaptable ;)

      Eliminar
  8. Saludos Oloman, a ver si me puedes ayudar con la cabecera de mi blog, ya que en vista móvil si que se adapta, pero si la ves desde móvil en vista web no se redimensiona. Ya he probado varios códigos incluido este de tu post pero nada. Te dejo la url del blog https://accionglobalxkiketrucker.blogspot.com.es/
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola. Ya que tienes una plantilla RWD (quizás no lo sepas), yo lo que haría sería desactivar la plantilla móvil de Blogger y dejar la tuya.

      Y para lo de la cabecera, creo que funcionaría añadir a tu CSS lo siguiente:
      #header-inner img {
      max-width: 100% !important;
      }

      Eliminar
    2. Muchas gracias Oloman, una puntualización, este código hace que se redimensione la cabecera en vista web de los móviles, pero también reduce un poco la vista desde el PC, ¿algún parámetro que añadir para que excluya el funcionamiento en vista desde pc?

      Gracias por tu tiempo y un saludo.

      Eliminar