Modificando La Planilla Móvil

Blogger ofrece buenas opciones a la hora de escoger una plantilla para móviles, pero si usas una plantilla personalizada en tu blog será mejor que también personalices la plantilla que usas para estos dispositivos, de esta manera te aseguras que tu blog no pierda identidad, y los visitantes sabrán que están en el sitio correcto cuando entren desde sus celulares.

Empezamos habilitando la plantilla para móviles

Nos vamos a la pestaña “Plantilla” de nuestro escritorio de Blogger y luego hacemos clic en el icono de la tuerca.

Marcamos la opción: “Sí, mostrar la plantilla para móviles en los dispositivos móviles”. Luego elegimos “Personalizado” en el cuadro “Elegir plantilla para móviles”.

Ahora nuestro blog se verá igual en los dispositivos móviles, pero esta no es la idea, la idea es que la plantilla se adapte a la pantalla de cualquier celular. (Puedes darle al botón “Vista previa” para tener una idea de cómo luce tu plantilla desde un celular).

Condicionando el HTML

Lo mejor será empezar ocultando algunos gadgets y cosas así. Para esto utilizamos el atributo mobile en las etiquetas <b:widget> que puede ser: ‘default’, ‘yes’, ‘no’, o ‘only’ (tal como lo explican en éste blog de Blogger).

Si queremos que el widget se vea en el móvil utilizamos el valor ‘yes’, así:


<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>

Con el valor ‘no’ ocultamos el widget en los móviles.


<b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>

Y con ‘only’ hacemos que sea visible únicamente en el móvil.


<b:widget id='BlogArchive1' mobile='only' title='Blog Archive' type='BlogArchive'>

El contenido de los widgets también puede ser modificado condicionándolos con la variable data:blog.isMobile.


<div class="widget-content">
  <b:if cond="data:blog.isMobile">
    <!-- Mostrar un enlace de texto si es un dispositivo móvil.-->
    <a href="http://www.blogger.com">
      Powered By Blogger
    </a>
  <b:else/>
    <!-- Mostrar una imagen si es un equipo de escritorio.-->
    <a href="http://www.blogger.com">
      <img expr:src="data:fullButton" alt="Powered By Blogger"/>
    </a>
  </b:if>
</div>

El CSS

Si queremos que nuestra plantilla se adapte perfectamente a la pantalla de un móvil, debemos modificar también el CSS de nuestro blog.

Es posible definir diferentes propiedades CSS para equipos de escritorio y dispositivos móviles. Sólo basta con modificar la etiqueta <body> de nuestra plantilla para que quede así:


<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Lo que hace la anterior linea de código es agregar la clase mobile a la etiqueta <body> cuando nuestro blog es visto desde un móvil.

Ahora cuando queramos modificar el CSS de nuestra plantilla móvil, sólo agregamos el selector .mobile a el contenedor que deseamos cambiar. Así:


/* PC de escritorio */
#header-wrapper {
  margin:0 auto 10px 10px;
  width:940px;
}

/* Dispositivo móvil */
.mobile #header-wrapper{
  margin:0;
  width:100%;
}

Vamos con un ejemplo

Utilizaré mi Plantilla Base. Trataré de hacer que sea flexible para que se adapte a la pantalla de los celulares sin que se vea la molesta barra de scroll horizontal.

Lo que haré será utilizar porcentajes como unidad de medida para el ancho de los contenedores. De esta forma el diseño del blog no se desarmará en celulares con pantallas más pequeñas.

Primero me voy a la plantilla del blog, y, justo después de la etiqueta de cierre </b:skin>, pego la siguiente linea de código condicional que indica que todo lo que esté dentro cargará únicamente si se está viendo desde un móvil:


<b:if cond='data:blog.isMobile'>
<!-- Plantilla para Móvil -->
</b:if>

Ahora, dentro de etiquetas <style> escribimos nuestro CSS.


<b:if cond='data:blog.isMobile'>
<!-- Plantilla para Móvil -->
<style type='text/css'>
/* Aquí va el CSS */
<style>
</b:if>

Lo que hice con el CSS fue resetear el margin de los contenedores principales y usar porcentajes en el width en lugar de pixeles.


.mobile #outer-wrapper{
  margin:0;
  width:99%;
  max-width:960px;
  background-position:left;
}
.mobile #header-wrapper{
  margin:0;
  width:100%;
}
.mobile #crosscol-wrapper{
  margin:0;
  width:100%;
}
.mobile #main-wrapper{
  margin:0;
  width:100%;
}
.mobile #sidebar-wrapper{
  margin:0;
  width:100%;
}
.mobile #footer {
  margin:0;
  width:100%;
}

También modifiqué algunos otros detalles para mejorar el diseño, el código completo se ve así:


<b:if cond='data:blog.isMobile'>
<!-- Plantilla para Móvil -->
<style type='text/css'>
/*------------------------------------*\
  MOBILE
\*------------------------------------*/
.mobile #outer-wrapper{
  margin:0;
  width:99%;
  max-width:960px;
  background-position:left;
}
.mobile #header-wrapper{
  margin:0;
  width:100%;
}
.mobile #crosscol-wrapper{
  margin:0;
  width:100%;
}
.mobile #main-wrapper{
  margin:0;
  width:100%;
}
.mobile #sidebar-wrapper{
  margin:0;
  width:100%;
}
.mobile #footer {
  margin:0;
  width:100%;
}
.mobile a .post-body{
  color:#333;
}
.mobile-post-outer{
  border-bottom:1px solid #ccc;
}
.mobile-date-outer > div {
  position:relative;
}
.mobile-index-arrow{
  font-size: 45pt;
  font-family: Arial;
  display: -webkit-box;
  -webkit-box-align: center;
  height: 100%;
  line-height: .3em;
  position: absolute;
  top: 0;
  right: 0;
}
.mobile-index-contents {
  margin-right: 25px;
  min-height: 25px;
}
.mobile-index-thumbnail{
  float:left;
  margin-right: .5em;
}
.mobile #comment-editor{
  margin-left:0;
  padding-left:0;
  max-width:300px;
}
.comments .comment-block{
  margin-left:0;
}
.comments .comments-content .comment-replies {
  margin-left:0;
}
.mobile-link-button{
}
.mobile-link-button a {
  background-color:#09f;
  color:#fff !important;
  height: 20px;
  padding: 3px 6px;
  display:inline-block;
  *display: inline;
  line-height:1;
}
.mobile #blog-pager-home-link{
  width:140px;
  margin: 0 auto;
}
.mobile .blog-pager-older-link,
.mobile .blog-pager-newer-link{
  font-size:17px !important;
}
<style>
</b:if>

El resultado:

Así se ve la plantilla desde un móvil con pantalla de dimensiones 320 x 480:

Y así se ve en un móvil a 480 x 320:

12 comentarios

  1. Luisa Gabriela — 18 de agosto de 2013, 14:09

    Buen post, amigo una pregunta como hago o en que parte puedo escribir un codigo y que me aparezca solo en mobiles. Por ejemplo si quiero mostrar una publicidad antes que empieze el post solo en mobiles. no he podido encontrar como hacerlo,
    ni.luismora@gmail.com

    1. Erwin Andrés — 20 de agosto de 2013, 21:49

      Busca en el código de tu blog el widget correspondiente a la publicidad y agrégale el atributo mobile='only'. Ahí está explicado en el post.

    2. Angelica Velasquez — 7 de marzo de 2014, 7:03

      colocando el el atributo mobile='only' me sale Error al analizar XML, línea 818, columna 31: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".

    3. Erwin Andrés — 7 de marzo de 2014, 16:18

      ¿En qué widget lo estás colocando? A veces es un error de Blogger, vuelve a intentarlo. Si no, muéstrame la linea de código entera.

  2. Tomás Rivera — 4 de julio de 2015, 5:31

    Acabo de usar las recomendaciones para poner la botonera de páginas solo en la versión móvil y ha funcionado correctamente. Muchas gracias!

  3. Irvis Osbel Medina — 27 de julio de 2015, 12:48

    Gracias por este articulo, es excelente el mejor que he encontrado. Gracias por todo!!!

  4. Irvis Osbel Medina — 27 de julio de 2015, 17:56

    Gracias por este articulo, es excelente el mejor que he encontrado. Gracias por todo!!!

  5. Leonardo Sanchez — 16 de mayo de 2016, 17:56

    amigo que buen post, quiero saber si tu puedes resolver esto: quiero que el blog en versión móvil se vea sin esos enlaces que muestran una foto miniatura, un resumen de la entrada y una flecha, me gustaría que se viera la entrada tal cual y no ese enlace, gracias por tu ayuda, saludos

    1. Erwin Andrés — 17 de mayo de 2016, 3:59

      No te recomendaría que hicieras eso si tus entradas son muy largas, ya que en los dispositivos móviles tener que hacer mucho scroll para encontrar otras entradas puede ser fastidioso. Pero si de verdad quieres hacerlo, prueba buscando en tu plantilla algo como esto:

      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-index-post'/>
        </b:loop>
      <b:else/>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-post'/>
        </b:loop>
      </b:if>

      Y cámbialo por este:

      <b:loop values='data:posts' var='post'>
        <b:include data='post' name='mobile-post'/>
      </b:loop>

      Yo no lo he probado, pero debería funcionar.
      Recuerda hacer una copia de seguridad de tu plantilla antes de hacer cualquier cambio.

  6. Leonardo Sanchez — 18 de mayo de 2016, 7:52

    Buenos días amigo, muchas gracias por tu ayuda, excelente respuesta.

  7. SuperaTuVaginismo — 30 de junio de 2016, 12:01

    hola, al añadir el mobile yes, realizando todo lo que mencionas antes, me sale un error: y html en rojo. que hago? gracias de antemano

    1. Erwin Andrés — 30 de junio de 2016, 13:44

      Muéstrame el error completo exactamente como te sale para poder ayudarte.