AyudaBloggers{...}
Cómo crear tu propia versión móvil en Blogger
Blogger hace un buen tiempo que nos permite tener una versión móvil del blog, para muchos es una ventaja ya que incluir esta función es muy sencillo y no es necesaria ninguna personalización complicada, pero para otros la integración es muy básica o bien quieren hacer su plantilla móvil mas acorde a la del blog.


El tutorial:

Para poder llevar a cabo este tutorial es estrictamente necesario conocer sobre CSS, porque empezaremos a diseñar una plantilla básicamente desde cero, en donde sólo tendremos como base el cuerpo del blog.

Paso 1: Migrando el CSS del blog a un archivo:

Para este tutorial es crucial que migren el CSS del blog a un documento .CSS, ya que ahora nos dedicaremos a escribir 2 estilos: Uno para el blog principal, y el otro para la versión móvil.

El primer archivo, deberá ser creado y posteriormente deberás incluirlo con el siguiente código antes de </head>:
<link href='URL-ARCHIVO-CSS' media='screen' rel='stylesheet' type='text/css'/>
Reemplazamos lo destacado en verde por la URL del archivo .CSS que hayamos creado.

Explicación: El valor  media='screen' lo que hace es permitir que la hoja de estilos cargue únicamente en ordenadores normales.

Paso 2: Creando tu nueva configuración CSS para el móvil:

De la misma manera que creamos el archivo .CSS para la versión normal, crearemos un segundo archivo, el cual contendrá las reglas y los atributos que se aplicarán únicamente cuando haya un teléfono móvil. En lugar de usar media='screen', utilizaremos un sistema de resolución máxima de no más de 480px de ancho:

<link rel="stylesheet" href="URL-CSS-MOVIL" media="only screen and (max-device width:480px)"/>
Actualmente los telefonos no tienen una resolución horizontal muy alta, pero si quieres probar en una resolución mayor, recomiendo que no superes los 640px.

Importante: Si no funciona con tu dispositivo, puedes crear una tercera regla de la siguiente forma:
<link rel="stylesheet" href="URL-CSS-MOVIL" media="handheld"/>
En donde media="handheld" permitirá que sólo los teléfonos móviles detecten esta hoja de estilos.

Extra: Eliminando el zoom-out del blog en dispositivos móviles:

Si ya haz creado exitosamente tu versión del blog para móviles, puede ser que aún siga existiendo el zoom-out, que básicamente lo que hace es mostrar la página a una escala muy baja, para eliminarlo basta con incluir la siguiente línea dentro de la etiqueta <head>:
<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>
Con esto limitaremos a 1x el zoom del blog en cualquier teléfono cuyo navegador sepa interpretar esta Meta Etiqueta.
víctor calderon

Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

Moderador en +TBEE y escritor/fundador de este blog.

tweet

Blogroll de Ayuda Bloggers