8 nov. 2013

Personaliza tu plantilla Blogger para móviles. Claves y fundamentos necesarios para lucir tu blog en estos dispositivos.

El enorme incremento en el uso de dispositivos móviles o tabletas como medio para navegar por Internet es un factor fundamental a tener en cuenta a la hora de crear páginas web o blogs.

Si bien inicialmente ha tendido a ser un factor "olvidado" hoy día se ha tornado fundamental. El cliente, el usuario, ya no utiliza exclusivamente un ordenador de sobremesa o portátil para visualizar las páginas web en Internet, ahora tiende a querer conectarse en cualquier lugar y en cualquier momento desde dispositivos con características bien distintas: pantallas reducidas, velocidades de acceso diferentes, ergonomía distinta...



Escoger una buena plantilla para el Blog, pudimos comprobar que aunque "a priori" resulta sencillo cambiarla, la elección correcta tenía muchos más matices que las ventajas visuales que ésta pudiera aportar. Con las plantillas para dispositivos móviles o tabletas, los datos a tener en cuenta son similares pero hay diversas características a tener en cuenta con dichas plantillas en base a la naturaleza del medio por el que van a ser mostradas.

Déjame darte algunas claves y consejos para la elección y personalización de plantillas para móviles y tabletas, descubre el potencial de Blogger a la hora de trabajar con esta clase de presentación y unos cuantos detalles a tener en cuenta para conseguir la mejor calidad.


Conceptos previos, ¿qué es "la plantilla" en Blogger?:

En el lenguaje más abstracto y menos técnico, la plantilla es el modelo de presentación sobre el que vas a trabajar para mostrar los contenidos de tu Blog. Se le denomina plantilla porque va a definir dónde y cómo se van a mostrar tus contenidos en el Blog. Por ejemplo, define dónde va a ir colocada la cabecera con el título del blog, qué tipos de letra se van a mostrar, con qué colores, qué componentes van a "dibujarse" y cómo van a hacerlo... es la base de la presentación que verán tus usuarios cuando accedan a tu Blog.

En un plano técnico, la plantilla es una representación esquemática realizada en XML que sintetiza código HTML en etiquetas "propias" de Blogger que al ser interpretadas conforman la presentación del blog.

¿Hay una plantilla para móviles?, ¿cómo funciona sin entrar en grandes tecnicismos?:

La plantilla para Blogger "pura" es única para móviles y para ordenadores. Simplificando técnicamente, se utiliza el mismo archivo para dibujar los componentes para móviles para que los componentes para ordenadores.

Lo que sucede es que dentro de la plantilla, por medio del código que la "programa", se puede comprobar si el Blog está mostrándose por un navegador de un ordenador de sobremesa o por un navegador de un móvil o tableta. Entonces, en función del dispositivo detectado en la programación de la plantilla se establecen unos "condicionales" que "dibujan" los componentes para ordenadores si el usuario está conectado con un ordenador o los de móviles si el usuario está conectado con un móvil o tableta.

¿Qué conforma una plantilla Blogger?

Como la plantilla Blogger es la misma para móviles que para ordenadores pero con condicionales que la hacen adaptarse a unos dispositivos u otros, la estructura de componentes que conforman un tipo de presentación móvil y otra de sobremesa son las mismas.

Si nos alejamos de la parte técnica, en la plantilla encontraremos cómo vamos a mostrar los componentes que conformarán el Blog junto con el aspecto que éstos tendrán.

Casi todas las plantillas suelen utilizar una barra de navegación que suele ocultarse para pasar de un Blog de Blogger a otro, una cabecera para el título, una zona donde residirán las entradas y un "pié de página" que remata el conjunto por la parte inferior. Dependiendo después del diseño que se desee aplicar luego podrá tener o no tener columnas laterales, mostrar las entradas de una manera determinada, una imagen de fondo o un color que abarque todo el blog, etc...

Dentro de esas bases de la plantilla, a los componentes que dentro de ella se dibujan se les llama Gadgets. Los hay de todos los tipos, formas, tecnologías y colores, es cuestión del usuario elegir aquellos que desea utilizar.

De nuevo en el apartado técnico, para darle formato a cada componente que motramos en cada zona de la plantilla se utilizan las hojas de estilo (conocidas como css)  y para la lógica que pueden tener algunos componentes (los +1, botones de cualquier clase, "gadgets" con animaciones, etc...) se utiliza el Javascript.

La plantilla es la misma pero ¿los componentes son los mismos para ordenadores que para móviles?

Aunque puedan llegar a serlo, no tienen porqué ser los mismos. Los componente para móviles dada la naturaleza de la representación de los datos en sus pantallas suelen ser distintos de los que se utilizan para ordenador.

Lo que más suele cambiar son los estilos de la hoja de estilos que se utiliza para un tipo de presentación o la otra.

¿Porqué se diferencia la presentación para móviles o tabletas de la presentación para ordenadores de sobremesa o portátiles?

La clave está en la forma de usar unos frente a otros (la "usabilidad" o experiencia de usuario):
  • Los ordenadores de sobremesa o portátiles cuentan con pantallas de mayor tamaño que las de los móviles o tabletas:
    • Si por ejemplo muestras tu Blog desde un móvil con la presentación de un ordenador, la letra será excesivamente pequeña porque la pantalla del ordenador es más grande.
    • Si visualizaras la presentación móvil en un ordenador a pantalla completa, la letra sería excesivamente grande. 
  • Los ordenadores de sobremesa o portátiles suelen manejarse con un ratón y teclado. Los móviles y tabletas suelen ser táctiles y en algunos casos tener dispositivos miniaturizados que cumplen similares funciones a las de un teclado o ratón:
    • En los móviles con capacidad de navegación suele hacerse "todo táctil". Hay excepciones como Blackberry u otros fabricantes que se las han arreglado para conseguir una excelente usabilidad de dispositivo sin necesidad de recurrir al uso táctil. Pero desde luego, no utilizas un ratón para moverte por el escritorio del móvil.
    • En los ordenadores utilizas un ratón y un teclado. Aunque últimamente se están comercializando monitores táctiles, la mayor parte de los usuarios utiliza ratón para "moverse" por su ordenador.
  • Los componentes para móviles suelen ser distintos a los de ordenadores no sólo ya por tamaño o por forma de utilizarse (de manera táctil o "con ratón"), son también distintos porque suelen ser más "ligeros". El nivel de detalle o "peso" de los componentes en un móvil debe ser menor que en un ordenador de sobremesa porque aunque últimamente la potencia de los móviles se está "equiparando" a la de los ordenadores, en su mayor parte (no en todos los casos y cada vez menos) poseen conexiones a Internet bastante más limitadas en ancho de banda.

¿Cómo se diseña para móviles y para ordenadores?, una explicación sin tecnicismos excesivos

Se suele utilizar el concepto de "diseño adaptativo" o "responsive design". Simplificando técnicamente, se trata de utilizar hojas de estilo que no poseen valores prefijados para dibujar sus componentes en la pantalla del usuario.

Un ejemplo con "Diseño no adaptativo":
Por ejemplo, si yo en una hoja de estilos de una plantilla digo en el código: "la cabecera de la plantilla se va a dibujar en este "sitio fijo" y con este "tamaño fijo", en cuanto ese Blog que yo estoy visualizando en mi pantalla con la cabecera en el sitio que yo quiero, cuando se dibuje en una pantalla más pequeña o más grande con distinta resolución, va a aparecer "descuadrado".
Un ejemplo con "diseño adaptativo"
El "diseño adaptativo" hará que las coordenadas utilizadas en la hoja de estilos de la plantilla no sean fijas sino variables en función del tamaño de la pantalla (más bien la resolución) donde se van a mostrar. Así pues, la cabecera del ejemplo anterior, independientemente de que se visualice en el blog a través de un móvil o a través de un monitor de ordenador, siempre se adaptará para mostrarse correctamente.

¿Qué tipos de plantillas hay para móviles?

Vamos a abstraernos de nuevo al máximo y nos centramos en dos grandes grupos: las creadas en Blogger y las generadas fuera de Blogger.

La herramienta de Google trae "de serie" un catálogo de plantillas "todo terreno" que abarcan un amplio espectro de las necesidades que los usuarios de Blogs podemos tener. Estas plantillas están lo suficientemente probadas y utilizadas como para que gocen de una gran estabilidad, de pocos fallos y sean fácilmente configurables al encontrarse dentro del estándar.

Las que han generado usuarios fuera de Blogger son plantillas realizadas con la "misma tecnología" o más bien, misma base que las plantillas por defecto pero con múltiples modificaciones que alteran en gran medida la presentación original de éstas.

Claramente, utilizar las plantillas por defecto que trae Blogger da lugar a que la misma presentación escogida por un usuario para un Blog se pueda ver repetida en otro que ha decidido utilizar la misma plantilla.

¿Cómo puedo cambiar la plantilla de mi Blog para móviles por una que traiga Blogger por defecto?:

Es extremadamente sencillo, seleccionas en el menú de la izquierda la opción "Plantilla" para a continuación sen la caja donde pone "Móvil" pulsar sobre el icono de "rueda dentada" que se visualiza bajo la citada caja con la previsualización de la plantilla para móviles:


  • Después de seleccionar la "rueda dentada" debajo de la caja con la previsualización para móvil, te aparecerá una pantalla como la que te muestro a continuación:

  • Si has personalizado tu plantilla te aparecerá la primera un "combo" o desplegable en el que poner "Elegir plantilla para móviles" en el que al hacer "clic" te permite elegir entre el catálogo que ofrece Blogger:

  • En el menú desplegable podrás o seleccionar una plantilla propia de Blogger que te guste o volver a la predeterminada para tu plantilla o a la personalizada que modificaste.


  • Cuando escojas la que te interese, verás una visualización preliminar a la derecha para ver cómo queda. También puede pulsar el botón "Vista previa" para ver una representación de cómo quedaría tu blog con esa plantilla aplicada pero sin aplicarse.
  • Una vez estés satisfecho con la plantilla a utilizar, sólo tienes que darle a "Guardar" y ya tendrás lista la plantilla para móviles de tu elección.

Creatividad al poder, realizar cambios en la plantilla o utilizar una plantilla creada fuera de Blogger

Normalmente el Blogger no se conforma con los estereotipos que por defecto ofrece la herramienta. Siempre busca nuevos "gadgets" y nuevas formas de ofrecer nuevas presentaciones.

Para acometer un cambio de presentación grande a nivel de vista para móviles o tabletas, se suele realizar partiendo de una plantilla de Blogger y personalizándola al máximo o, lo más sencillo, partir de una plantilla diseñada externamente a Blogger.

Si seleccionas una plantilla externa a Blogger, ponerla es sencillo también pero antes es recomendable que hagas una copia de seguridad de la plantilla que estés utilizando, de esa manera podrás volver atrás sin problemas si el cambio no te gusta.

Cambiar de plantilla no es "cambiarse de camisa", hay veces que puede quedarse algún gadget de la zona de diseño mal colocado o desconfigurado. Si te ocurre cualquiera de esas situaciones, simplemente entra en la vista de diseño y lo vuelves a colocar a tu gusto.

Antes de explicarte cómo ponerte una plantilla externa, lee atentamente estas recomendaciones:

  • No utilices cualquier plantilla de cualquier sitio. La plantilla puede contener "código malicioso" o "no eficiente", por tanto, investiga bien que la elección que has hecho es adecuada: búscala por internet por si otros usuarios han experimentado problemas, por si se afirma que pueda contener "malware", etc...
  • Busca sitios de confianza para hacer tus descargar. La comunidad +Plantillas Blogger Blogspot  o plantillas de otros Blogger de fiar que publican en comunidades de Google+.
  • Si tienes un perfil más técnico trata de estudiar el código para ver si está bien conformado y qué tecnologías está utilizando para mostrarse.
  • Mide la velocidad que puede tener tu Blog con la nueva plantilla con Google Pagespeed insights. Comprueba  que el rendimiento con el cambio no se vea excesivamente impactado.
  • Existen plantillas "premium" que son de pago, no suelen pasar de 20€ las más caras, suelen estar más depuradas pero conviene igualmente tomar las debidas precauciones.
  • Con los gadgets toma igualmente precauciones. No te pongas el primer "gadget bonito" que veas. Comprueba con AVAST MOBILE o AVG u otros antivirus si el gadget o la plantilla o código que hayas traído externo a Blogger pudiera estar utilizando algún tipo de "software malicioso" que fastidiara la experiencia.
  • No te fijes exclusivamente en que sea "bonita", debe ser práctica, eficiente y "usable" con móviles o tabletas. Verifica que es realmente fácil de usar. Recuerda que las animaciones automáticas de muchas plantillas suelen "agobiar" al usuario, modera la utilización de efectos para crear un entorno amigable que centre la atención en lo más importante: tus textos.

    Para cambiar la plantilla por otra que te guste y hayas verificado:

    • Hay múltiples webs con servicio de plantilla móvil para Blogger.
    • en Google basta con realizar una búsqueda con "plantillas para móviles Blogger" o "Blogger template theme" y te saldrán cientos.
    • Comprueba y verifica que el sitio sea de tu confianza. NO te fíes de cualquier propuesta a la primera, estudia si el código que ofrecen es el adecuado.
    • En Blogger, como la plantilla es la misma para los ordenadores de escritorio que para los móviles, normalmente la mayor parte de compañías te darán el código para que lo "copies y pegues" en tu plantilla en las zonas donde te indiquen. También existen web que alojan la "plantilla para móviles", esto ya es una elección que cada cual debe considerar.
    • En cualquier caso aplica siempre el sentido común y elige tomando las precauciones mencionadas, de esa manera no tendrás ningún problema.

    Para personalizar la plantilla propia de Blogger por defecto que has elegido, cómo detecto y diferencio el código para móvil del código para ordenador. Apartado técnico:

    • Observa siempre que en la plantilla Blogger existen las siguientes partes de código que voy a comentarte:
    EN EL <HEAD> DE LA PLANTILLA:
    1) EL VIEWPORT: Al comienzo del código encontrarás justo debajo de la etiqueta HTML <head> el siguiente código que te va a servir para conocer cómo configurarte la plantilla con el apartado para móviles y el apartado para ordenadores:

     <head> 
        <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
        <b:else/>
    <meta content='width=1100' name='viewport'/>
        </b:if> 


    • La etiqueta XHTML <b:if cond='data:blog.isMobile'> establece la condición de "si se está presentando el blog por una pantalla de móvil", entonces:

    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    El tamaño máximo de la zona de visualización del cuerpo principal del blog se adaptará automáticamente al tamaño de la pantalla donde se visualice. Esto es, se adaptará a la resolución y área de visualización del dispositivo que sea.
    A partir de ese momento, para todo el resto del código del Blog, el tamaño máximo de la zona de visualización del cuerpo principal del Blog quedará definido para ese tamaño.
    De esta manera, el "contenedor" de todos los componentes habrá adquirido un nuevo tamaño que queda prefijado para que los componentes móviles se dibujen en proporción a este dentro del móvil.

    • La etiqueta XHTML que sigue,   <b:else/>, establece la condición "si no" entonces el área de visualización es:

     <meta content='width=1100' name='viewport'/>
    El área de visualización está fijado a 1.100 para si no es una pantalla móvil la que se está utilizando para visualizar el Blog. En mi caso es 1.100, normalmente lo estándar suele estar en 960 o hasta 990, pero esto es variable dependiendo de los propósitos del sitio web.

    • El condicional se cierra siempre con  </b:if>.
    • Este  <b:if cond='data:blog.isMobile'> da mucho juego, pues te permite en todo momento en cualquier lugar de la plantilla poder decir qué quieres que se procese cuando sea un móvil lo que se está utilizando para presentar tu blog. Antes del  <b:else/> para establecer el viewport para ordenadores, podrías traerte, definirte o sobreescribir estilos para móviles.

    2) LAS HOJAS DE ESTILO Y CÓMO UTILIZARLAS: Si tu código CSS, de tu hoja de estilos, no es "inline", al comienzo del código fuente de la plantilla al expandir artilugios encontrarás las etiquetas XHTML:

    <b:skin><![CDATA[

    Ahí es donde se almacenan los estilos de tu plantilla. Los estilos para móviles en Blogger suelen tener los mismos nombres de clase que los estilos para ordenadores, lo que sucede es que suelen prefijarse por la palabra .mobile
    .mobile .body-fauxcolumn-outer {
      background: $(mobile.background.overlay);
    Ahí podrás editar tamaños, estilos de letra y colores para tu presentación para móvil. Localiza siempre la palabra .mobile y altera la clase según tus necesidades.

    • En las plantilla para Blogger suele ponerse un comentario que advierte de la parte de la hoja de estilos destinada a la presentación móvil. Suele poner siempre primero las clases y atributos para la visualización para ordenadores seguida de las hojas de estilo para la visualización por móviles.
    • Puedes establecer <b:if cond='data:blog.isMobile'> <b:else/> dentro del CDATA de la plantilla para incluso utilizar los mismos nombres de clase pero con diferentes valores en sus atributos para móvil que para ordenador. Recuerda siempre antes de establecer el <b:if cond='data:blog.isMobile'> que la etiqueta CDATA debe estar correctamente cerrada y que después puedes volver a abrir otro CDATA cuando termine el <b:else/>  y siempre cerrar luego todo el condicional con </b:if >. 

    EN EL BODY DE LA PLANTILLA:
    3) Esto es, a partir de la etiqueta XHTML  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> .
     A partir de aquí las normas para trabajar con gadgets para móviles o para ordenador son bien sencillas:
    a) Puedes dividir código poniendo <b:if cond='data:blog.isMobile'> y justo debajo los widgets que quieres que se dibujen para móvil y después un <b:else/> con los que quieres para ordenador, o simplemente cerrar con </b:if > el <b:if cond='data:blog.isMobile'>, de manera que lo de dentro del <b:if cond='data:blog.isMobile'> es lo que quieres que se muestre para móvil.
     b) Puedes ir "widget" a "widget" y poner:
     <b:widget id='HTML1' mobile='yes' locked='false' title='Archivo' type='Archive'/>
    - Donde mobile='yes' significaría que quieres que el "widget salga por el móvil".
    - O  mobile='no' para indicar que "ese widget NO salga por el móvil".

    - También puedes poner mobile='only' para que "sólo se dibuje el widget en móviles".
     Puedes igualmente combinar las  opciones a y b siempre que no entren en contradicción.

    ¡Eso es todo!, disfruta y crea una plantilla estupenda para dispositivos móviles con la que tu Blog luzca como nunca lo fundamental: tus contenidos.

    Escrito por Miguel García Sánchez - Colomer

    Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

    103comentarios:

    1. Respuestas
      1. Muchas gracias Ricardo, una alegría que pueda servir. Aquí estoy a tu disposición, un saludo y muchas gracias.

        Eliminar
    2. Hace dos meses publiqué un artículo dando las instrucciones básicas para cambiar el diseño de un blog instalando una nueva plantilla ( http://bit.ly/1bkA5sN ).
      Tengo que darte la enhorabuena porque el enfoque que das al artículo es muy completo y didáctico, tocando algunos conceptos fundamentales de programación.
      Un saludo, Chema.

      ResponderEliminar
      Respuestas
      1. Gracias chema, te agradezco mucho tu aporte. La intención es esa, ser didáctico y explicar con sencillez cosas complejas. Todos los tutoriales de Diarios de la nube lo intentan... lástima que me falta tiempo para dedicarle...

        Un saludo y gracias de nuevo.

        Eliminar
      2. I read your article. It was superb and very informative for me. Please keep continue to posting.

        Thanks
        Josemanuel
        http://www.globaltelco.es/

        Eliminar
    3. Enhorabuena por el artículo Miguel, creo que has hecho un gran trabajo que espero sirva de mucha ayuda, a mí al menos me has dado unas pistas.

      ResponderEliminar
      Respuestas
      1. Muchísimas gracias Jon, es justo lo que intento con cada artículo que hago, así que me das mucha alegría. Te lo agradezco. Un saludo.

        Eliminar
    4. Hola Miguel, estoy intentando modificarlo pero me sale desbordado de ancho en la plantilla móvil la plantilla de mi blog y no se donde arreglarlo para que se vea mejor. Saludos y quedo a la espera de lo que me digas.

      ResponderEliminar
      Respuestas
      1. Hola!, lo que te comenté por correo compañera. Debes establecer un viewport (la parte de arriba de la guía) para que tu página se dibuje acorde al tamaño de la pantalla del dispositivo donde se presente. Ve a punto 1) El Viewport y prueba.

        Un saludo!,

        Eliminar
    5. Muchas gracias MIguel por el artículo. ¿ Tienes uno para meter un menú de categorías en el blog? Muchas gracias

      ResponderEliminar
      Respuestas
      1. Tengo para menús: http://www.diariosdelanube.com/2013/04/crea-un-menu-con-subopciones-en-blogger.html y este otro http://www.diariosdelanube.com/2013/04/aprende-crear-un-menu-sencillo-con.html. Un saludo!!!

        Eliminar
    6. Muy buen tutorial y muy buen blog, gracias por tu ayuda, se agradece enormemente. por el aporte. gran blog, sí señor, así se hace.

      ResponderEliminar
      Respuestas
      1. Mil gracias a ti Iván, son muchas horas de dedicación y a veces se hace agotador pero cuando alguien te escribe algo así, cuando ves que esto sirve y que puede ayudar, es cuando recojo con creces el fruto de ese esfuerzo.

        Muchas y muy sinceras gracias por tu apoyo, cualquier cosa aquí estoy.

        Eliminar
      2. Hola Miguel,

        es exactamente lo que me pasa a mi, aveces, tengo una web con algunos truquillos Blogger, diseño y entretenimiento, que se basa, más que nada en el entretenimiento, cómo televisión online, que se denomina; www.aizumblog.com, en está pagina hay varios apartados, cómo radios, juegos, diarios, etcétera. Y perdona por el enlace, no pretendo hacer spam, sólo quiero que me visites, a ver que te parece mi sitio, luego borra el mensaje, si crees que estoy haciendo spam, Si quieres, y te parece bien, podemos intercambiar links, ya que está página me parece de lujo, por el esfuerzo y esmero que presentas en tus escritos, se merece que sea reconocida. Saludos desde Aizum Blog.

        Eliminar
      3. No te preocupes, no es spam para nada.
        Me ha gustado la verdad, el diseño es correcto y los contenidos muy divertidos cuando tienen que serlo.

        Un saludo,

        Eliminar
    7. Buenas Miguel!!

      Pese a modificar el diseño de la plantilla, en la versión móvil se ven algunos textos algo descuadrados, respecto a la versión de pc. A parte de que los videos en móvil no se cargan. ¿A que se puede deber eso?

      Un saludo y muy bueno el tutorial

      ResponderEliminar
      Respuestas
      1. Se trata de las hojas de estilo y la resolución en un dispositivo en comparación al otro. Tengo pendiente hacer un artículo al respecto, pero básicamente, puedes sobreescribir la clase para que con la resolución menor de los móviles te quede centrado igual. Dame tiempo y preparo un tutorial al respecto. Es hacer "adaptavivo", lo que llaman "responsive-design" el contenido.

        Intentaré hacer muy sencillo, dame unos días y te aviso.

        Un saludo!,

        Eliminar
      2. Muchas gracias. Probaré a ver que tal queda.

        Un saludo

        Eliminar
      3. Hola Manu,
        esto es asequible pero te recomiendo las nuevas entradas sobre diseño adaptable porque van genial no sólo con móviles sino con cualquier dispositivo:

        - http://www.diariosdelanube.com/2014/02/que-es-responsive-design.html
        - http://www.diariosdelanube.com/2014/02/como-funciona-el-responsive-design.html

        Estos días iré haciendo varias entregas para que se entiendan bien los conceptos. Un saludo!

        Eliminar
    8. Buenas de nuevo Miguel.
      Le he echado un vistazo y he mirado de modificarlo, pero nada. La cosa es que solo se me ve descentrado las cosas que he tenido que colocar con la barra espaciadora. No se si eso afectará a que se vea mal en el móvil o que.

      Saludos

      ResponderEliminar
      Respuestas
      1. Hola Manu, aún tengo pendiente la guía para poder hacer una metodología de transformación a responsive design de un Blog. En cuanto la tenga te aviso.

        Con respecto a lo de los espacios en blanco, eso no es buena idea porque son "valores fijos" y poco exactos a su vez.

        Lo mejor es aplicar los estilos correctos, si quieres mándame la URL e indícame con exactitud un párrafo que esté mal para poderte indicar. En tu caso lo más probable es que tengas que usar un @media con la resolución concreta del móvil donde se visualiza mal y reescribir el estilo de párrafo de aquellos textos que salen mal.

        Un saludo!,

        Eliminar
      2. Buenas Miguel,

        te dejo el link: eddp88.blogspot.com.es
        En cualquier entrada de las que hay, abajo del todo donde la discografía, a partir d ela canciín 13 está modificado con los espacios para poderlo ajustar el resto.

        Muchas gracias

        Eliminar
    9. Por lo que he visto, tu Blog no tiene un diseño responsive y no se ve "cuadrado" en un móvil. No te preocupes, a lo largo de la semana que viene (esta no puedo) haré un post al respecto sobre la metodología a seguir para hacerlo responsive. Mientras en Blogger puedes activar la plantilla para móviles y hará que quede todo más ajustado (En la zona de plantilla). Otra opción es bucarte una buena plantilla responsive de lo tuyo y ponerla para hacer pruebas y dejártelo ok.

      Cualquier duda si con esto no te he respondido pregunta. Es que es complicado porque cada móvil o tableta tiene una resolución, activa en Blogger lo de la plantilla para móviles y vigila el rendimiento.

      Un saludo!.

      ResponderEliminar
      Respuestas
      1. Perfecto Miguel, estaré al tanto de tus actualizaciones.

        Un saludo y muchas gracias por todo!!

        Eliminar
      2. Genial Manuel... en cuanto tenga tiempo haré la guía para facilitar el tema. Un saludo y gracias a ti.

        Eliminar
    10. Buenas, he intentando con diferentes plantillas poner en el witget directamente la orden 'mobile='yes' y me sale siempre lo siguiente:

      Error al analizar XML, línea 1224, columna 31: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>"

      Por favor ayuda

      ResponderEliminar
      Respuestas
      1. Es porque debes construir el código fijándote en que cierres las etiquetas "<" "/>" correctamente. Observa en el código que añades y fíjate que estás cerrando las etiquetas correctamente. Fíjate en el ejemplo b) del paso 3), y cómo se cierra toda la línea correctamente, cómo debe escribirse el código para daptarlo a tu Blog.

        Un saludo!

        Eliminar
    11. Me ha parecido muy interesante, muchas gracias por la ayuda y las aclaraciones respecto el tema de las plantillas, merci

      ResponderEliminar
      Respuestas
      1. Gracias Mario, a tu servicio. La verdad que con el tema de los móviles, el código de las plantillas es fácil una vez que te explican estos detalles. Me alegro que te sea útil. Gracias por participar.

        Eliminar
    12. Saludos y Enhorabuena por el Blog!
      Mi problema es que la imágen de cabecera no me aparece en la versión móvil. Seleccioné plantilla predeterminada y sí aparece en la previsualización pero no en el móvil.
      Gracias de antemano y saludos!

      ResponderEliminar
      Respuestas
      1. Hola Sebas, es que sucede que cuando utilizas la plantilla para móviles predeterminada de Blogger, se quita la mayor parte de información que presentas en la plantilla estándar. Puedes probar a seleccionar dentro de las plantillas para móviles la que pone "personalizada" y ahí podrás visualizar cómo queda tu plantilla normal para móviles.

        Cualquier duda me dices.

        Un saludo,

        Eliminar
      2. Hola! Me pasa lo mismo, le he dado a personalizado pero no se ve la imagen de cabecera.

        Gracias!

        Saludos.

        Eliminar
      3. Hola Flosite,
        la plantilla para móviles de Blogger que sale de una plantilla estándar elimina de pantalla todo aquello que pueda hacer poco usable en un móvil la información. Esto lo hace así para que el usuario pueda manejarse con mayor facilidad (viendo bien las letras, pudiendo poner bien los dedos, etc...).

        Mi consejo es que si no te gusta mucho la plantilla para móviles por defecto, pruebes a buscar una plantilla general de Blogger que sea responsive: http://www.diariosdelanube.com/2014/02/que-es-responsive-design.html

        Un saludo!!!

        Eliminar
    13. Muchas gracias por el post. Me ha servido de gran ayuda.

      ResponderEliminar
      Respuestas
      1. Me alegro Patricia, cualquier cosa aquí estamos. Un saludo.

        Eliminar
    14. Fantastico... Explicado facil y con ejemplos...Al menos ya conseguí que se visualicen los post por el movil, ahora voy por las pestañas. Un abrazo enorrrrrme Miguel, me traía por la calle de la amargura...

      ResponderEliminar
      Respuestas
      1. Encantado que pueda servirte. Es lo que intento, que a la gente le pueda servir cada explicación que aquí doy para que puedan mejorar su web. Una gozada cuando veo un feedback tan positivo. Te lo agradezo a ti. Cualquier cosa tienes Diarios de la nube a tu disposición.

        Un saludo!.

        Eliminar
    15. Respuestas
      1. Me alegro que te guste Rafa. Un saludo, siempre un placer leerte por aquí.

        Eliminar
    16. ei muchas gracias!
      He podido solucionar mi problema con la configuración!

      seguiré leyendo tus posts!

      un saludo

      ResponderEliminar
    17. Hola Miguel! Tengo un problema con mi plantilla, no puedo cambiar la personalizacion para movil. Elimino todos los b:include que tienen la palabra mobil, pero luego vuelven a aparecer automaticamente. El problema es que la pagina es re lenta y si pongo las responsive de google no puedo agregar un banner que necesito que la pagina tenga. Espero puedas solucionarme el problema. Mi pagina es monkeymotor. Blogspot
      Muchisimas gracias amigo!

      ResponderEliminar
      Respuestas
      1. Lo mejor es que pongas una plantilla responsive de las que puedes adquirir a bajo coste para Blogger. El resultado es muy profesional y quedan bien.

        No todos los include donde ponga mobi son de móvil. Intenta seguir los pasos de la guía para que sin borrar nada (utilizando los if condicionales o los mobile=false) te salga lo que necesitas.

        Mi consejo es que cambies la plantilla.

        Un saludo!

        Eliminar
      2. Ok Migue muchas gracias! Voy a hacer lo de la guía otra vez y si no funciona voy a ver de cambiar la plantilla.
        Muchas gracias!

        Eliminar
      3. Es lo mejor, cualquier cosa aquí estoy. Un saludo!

        Eliminar
    18. Por fin alguien que explica como cambiarlo en condiciones, gracias.

      http://curiosidadesasombrosasweb.blogspot.com.es/

      ResponderEliminar
    19. Buenas!
      Me ha servido de mucho tu tutorial para empezar a personalizar mi plantilla actual y adaptarla a móviles, pero sigo teniendo un problema: cuando añado un widget a la versión móvil con mobile='yes', efectivamente me aparece pero se descuadra y se alarga al final de la página, no sé si me explico... El texto del widget se muestra como una letra debajo de otra en vez de formar frases, por ejemplo.
      Además los fondos semitransparentes del widget (rgb) directamente pasan a transparente. ¿Puedo hacer algo al respecto? Gracias de antemano!

      www.ooakcraft.es
      www.eng.ooakcraft.es

      ResponderEliminar
      Respuestas
      1. Y se me había olvidado, cuando adapto la plantilla para móviles me hace una lista de las páginas que tengo en el blog pero al pinchar en ellas me dice que no existen... ¿qué estoy haciendo mal? :(

        Eliminar
      2. Hola!,
        no estás haciendo nada mal, es que tu plantilla tiene en sus css un estilo especial para el móvil para que aparezca el menú con ese aspecto que indicas.

        Pienso que dado que todos esos cambios requieren retocar código y es complicado, si quieres prueba a ponerte una plantilla responsive que seguro te servirá para móviles y ordenador y te vendrá bien. Esta guía te puede ayudar a conseguirlo: http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger.html

        Un saludo!

        Eliminar
    20. Enhorabuena es el post mas completo que lei sobre el tema. Yo voy poco a poco adaptandola pero el problema mas gordo que tengo es que me sale un mega boton de pin it que no se como quitar y me gustaria añadir los botones que instale en la plantilla paea compatir los posts. Un saludo.

      ResponderEliminar
      Respuestas
      1. Quizá me meto donde no me llaman... ¿Has probado a poner class="nopin"? Si el botón de pin-it es el que sale en las fotos de tus post con eso puede que funcione. Seguro que hablas de otra cosa, pero bueno...

        Eliminar
      2. Claro que si, gracias por tu ayuda. Participa con tus sugerencias.

        Ana María, para Pinterest te recomiendo esta guía: http://www.diariosdelanube.com/2013/10/disfruta-de-pinterest-con-blogger.html

        Te vendrá genial para hacer lo que necesitas.

        Muchas gracias por participar.

        Eliminar
    21. Enhorabuena es el post mas completo que lei sobre el tema. Yo voy poco a poco adaptandola pero el problema mas gordo que tengo es que me sale un mega boton de pin it que no se como quitar y me gustaria añadir los botones que instale en la plantilla paea compatir los posts. Un saludo.

      ResponderEliminar
      Respuestas
      1. Paciencia que al final sale. Lo del PIN IT, podrías meterlo en un gadget de la barra lateral cuya propiedad mobile=false o poner un if cond para que no se muestre en el móvil. También tienes soluciones con AddThis.

        Cualquier cosa aquí estoy.

        Un saludo!

        Eliminar
    22. Y no se puede poner articulos relacionado con mi blog en la version movil? la verdad ayudaria mucho si se pudiera

      ResponderEliminar
      Respuestas
      1. Claro, puedes poner por ejemplo el gadget de linkwithin (aquí tienes un artículo http://www.diariosdelanube.com/2013/10/anade-un-componente-de-entradas.html) y le pones encima el b:if cond='data:blog.isMobile' y lo tendrías.

        Un saludo.

        Eliminar
    23. Muchas gracias me ha sido de gran ayuda. Un abrazo :)

      ResponderEliminar
      Respuestas
      1. Gracias a ti Noemí, es todo un placer ayudar y más a ti que eres una "antigua" seguidora de Diarios de la nube. Muchas gracias y un abrazo.

        Eliminar
      2. Hola, tengo una duda con la versión móvil, he buscado por todas partes y no encuentro solución.
        Al ver el blog desde el celular sale una imagen miniatura junto con la publicación, mi problema es que la imagen que aparece es la última que coloco y no la primera (que es la que quiero que aparezca como imagen principal) ¿hay algún modo de elegir qué imagen va a salir en ese cuadro miniatura?
        Saludos

        Eliminar
      3. Hola,
        si es en plantilla, la pequeña pantalla sirve para hacer una vista previa de la visualización para móviles. En los blogs, siempre se ordenan las entradas cronológicamente, es decir sale primero la última.

        Un saludo,

        Eliminar
    24. Muy interesante , lo llevaré a la práctica gracias

      ResponderEliminar
      Respuestas
      1. Un placer ayudar, cualquier cosa aquí estoy. Un saludo.

        Eliminar
    25. hola buen blog

      tneog un problema lo que pasa es que en mi web Triple W Punto Laeramusical Punto Net (la escribo asi para evitar spam u otra cosa) si puede visite alguno de mis post y vea que debajo del titulo aparecen la fecha las etiquetas y mas abajito aparece un anuncio de adsense, ese anuncio esta en el codigo de fuente de mi blog
      lo que quiero es hacer que ese anuncio en la version movil no aparesca, quiero que aparesca otro de otro tamaño pero no entendi muy bien el documental me podria hacer el favor de ayudarme gracias

      ResponderEliminar
    26. hola buen blog

      tneog un problema lo que pasa es que en mi web Triple W Punto Laeramusical Punto Net (la escribo asi para evitar spam u otra cosa) si puede visite alguno de mis post y vea que debajo del titulo aparecen la fecha las etiquetas y mas abajito aparece un anuncio de adsense, ese anuncio esta en el codigo de fuente de mi blog
      lo que quiero es hacer que ese anuncio en la version movil no aparesca, quiero que aparesca otro de otro tamaño pero no entendi muy bien el documental me podria hacer el favor de ayudarme gracias

      ResponderEliminar
    27. Hola,
      tienes diversas opciones: o utilizar un if condicional que haga que el anuncio no salga en móviles, o utilizar el formato de anuncio Responsive.

      A- Puedes poner justo antes del anuncio el if condicional (quito el > para que deje poner el comentario). Pon <b:if cond='data:blog.pageType !== "data:blog.isMobile" y añade el código del anuncio justo debajo.

      B- Puedes meter el anuncio en un gadget HTML/Javascript y hacer lo que aparece en esta guía de poner: <b:widget id='HTML1' mobile='yes' locked='false' title=' type=''/ Es decir, en el widget HTMLn que se te cree en el código de la plantilla al meter el anuncio en un gadget HTML/Javascript de Blogger, poner la propiedad mobile='yes' para que sólo aparezca en móviles.

      C- Utilizar el tipo de anuncio Responsive para que el anuncio se adapta a la resolución del móvil. Crea un anuncio nuevo de tipo responsive (adaptable) y ponlo en la zona donde te interesa para ver cómo queda.

      Un saludo y muchas gracias.

      ResponderEliminar
      Respuestas
      1. Hola Miguel;

        Me has salvado el pellejo, maestro!!!

        He usado la opción "B" para meter un banner en mi blog "macallisteros.blogspot.com" para el formato móvil y: HA FUNCIONADO!!!

        Ya me veía quitando el banner y lamentando no tener más publicidad en un medio que tiene muchas visitas.

        El pero lo verás enseguida y es que, me sigue saliendo la etiqueta del nombre "adpv07" encima del banner.

        De todas formas, muchísimas gracias por tus guías, Miguel.


        Recibe un cordial saludo.

        Eliminar
    28. Hola amigo yo uso este metodo:
      http://www.ciudadblogger.com/2010/01/adsense-en-medio-de-las-entradas.html
      pero yo quiero que salga en el ordenador y tambien salga en el movil ¿como hago?.

      ResponderEliminar
      Respuestas
      1. Hola Antonio,
        para móviles mi recomendación es utilizar los anuncios "Adaptables" (Responsive) de AdSense. Si el anuncio sale en el móvil, tu plantilla debería ser responsive porque si no ocupará toda la pantalla o gran parte de la misma.

        El método explicado por los compañeros de CiudadBlogger está pensado para ordenador o móvil, lo que sucede es que si tienes la plantilla para móviles estándar de Blogger activada, no se mostrará el anuncio como deseas.

        ¿Es ese tu problema?.

        Un saludo.

        Eliminar
    29. Hola Miguel! Tengo un problema bastante extraño, yo uso una plantilla para móviles diseñada por mí, el problema es que adsense me cuenta mal las visitas y como la mayoría proviene de celulares, quiero volver a usar alguna de las predeterminadas por blogger. Hasta ahí todo parece marchar bien, el problema es que al poner cualquiera de las plantillas para móviles de blogger, no me sale adsense. Es rarísimo, no se si capaz tengo algo mal en mi html o que. Ahora tengo puesta la plantilla diseñada por mí porque sino me pierdo adsense.
      Espero puedas guiarme hacia la solución.
      Muchas gracias!

      ResponderEliminar
      Respuestas
      1. Hola!,
        es que las plantillas de Blogger para móviles no tienen AdSense. Creo que las de vistas dinámicas eran las únicas que lo permitían. Pero aún así, por si no lo hicieran, mi recomendación es que te instales alguna plantilla responsive para Blogger. Hay miles de sitios web y su coste es muy bajo (30$ como mucho), simplemente pon "plantillas blogger responsive" y dale a buscar en Google, verás que hay cientos de sitios y esas plantillas si te permitirán utilizar anuncios AdSense.

        Un saludo!

        Eliminar
      2. A ti, cualquier cosa estoy aquí para las dudas. Un saludo!

        Eliminar
    30. Un post muy completo y bien explicado, con nada de un lenguaje técnico incomprensible para la gente de a pie. Así da gusto. Gracias de veras.

      Te expongo mi problema, ¿de acuerdo? Cuento con plantilla personalizada para visualizar en móviles, pero no sé por qué, algunos de los elementos salen por duplicado. P. Ej.: desde el menú de configuración de entradas, inserté en su dia una imagen con enlace para suscripción y en el móvil se duplica siempre. Y otro elemento que se suele duplicar son los comentarios: siempre que comento o alguien me comenta vía móvil, sucede igual, a qué se puede deber. ¿Cómo puedo solucionarlo? Gracias.

      ResponderEliminar
      Respuestas
      1. Hola Rebeca!, gracias a ti, para mí es un placer ayudar.

        A mí me ha sucedido que a veces los comentarios se duplican, pero es algo "incontrolable" porque depende de si el usuario le da dos veces a publicar seguidas o de factores que son imposibles controlar.

        Lo de los gadgets duplicados, muchas veces sucede porque la vista de diseño en Blogger da problemas. A mí me pasa especialmente al recuperar copias de seguridad de la plantilla. Limpia la caché del navegador por completo antes de añadir nuevos gadgets para asegurarte que no hay problemas con los archivos que hacen que Blogger determine la colocación de un componente nuevo que añadas. También, cuando pongas gadgets nuevos, si alguno se duplica, compruebes si se te ha puesto dos veces en la vista de diseño y elimina en ella la que sea sobrante.

        También a veces sucede que en la vista móvil tenemos "filtros" que provienen de las hojas de estilo que dicen "muestra esto si es móvil o no lo muestres si es móvil" y a veces si lo ponemos erróneamente puede duplicar algún componente de la web (es donde se pone en ocasiones display:none al estilo de un componente que se quiere dibujar).

        Por último, también ocurre que la plantilla se queda corrupta, lo cual tiene solución pero hay que hacerlo con delicadeza. Y yo sólo lo haría como último recurso. Así pues, prueba las otras dos cosas que te he comentado y si te continúa sucediendo, vuélveme a escribir para que te explique la manera de arreglar una plantilla que pueda haberse quedado corrupta.

        Cualquier cosa aquí me tienes.

        Gracias por participar.

        Eliminar
    31. Hola Miguel!
      Muchas gracias por la información, mi problema es que estoy utilizando una plantilla ya preparada para dispositivos móviles sin necesidad de personalizar desde blogger, de echo en blogger tengo que escoger la opción (No, mostrar la plantilla para ordenador en los dispositivos móviles) para que se vea bien, el problema es que me he vuelto loco intentando ocultar un anuncio de adsense en forma de menú que me desconfigura la pagina por completo en la versión móvil, y estoy obligado a mantenerlo en versión PC porque es el anuncio que mas ingresos me genera, lo tengo puesto en un gadget, y llevo ya días buscando solucionarlo y nada.
      Solo quiero que ese anuncio se deje de ver en versión Movil.
      Te agradecería cualquier consejo o recomendación y muchas gracias por tu tiempo.
      Te dejo la dirección de mi blog por si le quieres echar un vistazo:
      http://www.quierosermanga.com/

      ResponderEliminar
      Respuestas
      1. Fíjate donde pone:
        b) Puedes ir "widget" a "widget" y poner:

        - Donde mobile='yes' significaría que quieres que el "widget salga por el móvil".
        - O mobile='no' para indicar que "ese widget NO salga por el móvil".

        - También puedes poner mobile='only' para que "sólo se dibuje el widget en móviles".
        Puedes igualmente combinar las opciones a y b siempre que no entren en contradicción.

        Eso debes hacer.

        Un saludo.

        Eliminar
    32. Hola Miguel García Sánchez - Colomer
      Ya lo he echo en todos los widget (mobile='no' ), y no desaparece ninguno en la versio movil, no se que puede ser la verdad, ya llevo tiempo probando de todo y nada, seguramente es el diseño de la plantilla que no lo permite, o no se que puede ser, pero vamos de momento tengo desctivado el Menu adsense hasta que encuetre una solucion.
      Gracias.

      ResponderEliminar
      Respuestas
      1. No, tienes otra opción, utiliza los condicionales: donde pongo de ejemplo <b:if cond='data:blog.isMobile' y <b:else/ Lo que pongas debajo de "isMobile" saldrá en móvil y lo que pongas en "else" no saldrá en el móvil. Prueba también con esta entrada: http://www.diariosdelanube.com/2014/09/como-utilizar-condiciones-en-blogger.html

        Un saludó y ánimo que al final sale. Haz pruebas si no en un Blog de pruebas antes.

        Eliminar
    33. Enhorabuena por el blog, es muy instructivo.
      Estoy probando una plantilla externa que en teoría es responsive, pero me surgen dudas.
      1.- Voy al icono de la rueda dentada y aunque elija "No, mostrar la plantilla para ordenador en los dispositivos móviles" luego al hacer el test oficial de friendly mobile de google dice que la plantilla esta optimizada para móviles, ¿cómo es posible esto, no se supone que si elijo esta opción no le estoy dando versión para móvil y debería salir que no está optimizada?
      2.- En esos casos en que la plantilla ya es responsive ¿Que opción hay que elegir para que la versión mobile sea la que ya trae la plantilla en su código y no coja una de blogger?.
      Saludos y gracias

      ResponderEliminar
      Respuestas
      1. Hola,
        no te preocupes que lo tienes todo bien. Cuando la plantilla es responsive, NO hay que activar la plantilla para móviles de Blogger, déjala sin activar directamente. Puedes comprobar que es Responsive porque si vas por ejemplo reduciendo el navegador hasta el tamaño de un móvil, tu web se debería ir adaptando. Prueba esta entrada que te vendrá muy bien para ver tu web en móvil rápidamente: http://www.diariosdelanube.com/2014/07/como-se-ve-el-blog-en-moviles.html

        Cualquier cosa aquí estoy.

        Un saludo y gracias por participar.

        Eliminar
    34. Me ocurre lo que a muchos, intento ir a un widget para que no salga en versión movil pero no me funciona solo con añadir mobile='no'.
      Lo que hago es si tengo esto
      <b:widget id='HTML12' locked='false' title='' type='HTML'
      Lo convierto en esto
      <b:widget id='HTML12' mobile='no' locked='false' title='' type='HTML'
      Y no funciona, sigue saliendo el widget que no quiero en versión móvil. Así que supongo solo me queda optar por el condicional if, pero en el ejemplo que pones está pensado para poner algo en la versión móvil
      <b:if cond='data:blog.isMobile'
      Lo que quiero para movil
      <b:else/
      Lo que quiero para ordenador
      </b:if
      y lo que busco es justo lo contrario, es decir lo que no entiendo es la manera de poner un condicional para negar que salga un widget en versión móvil y solo salga en versión pc a pesar de haber leido ya tu post sobre como usar condicionales en Blogger

      ResponderEliminar
      Respuestas
      1. Prueba con esto: <b:if cond='data:mobile == "false"' (cerrando el b if y las etiquetas :bif y de más, es que en los comentarios no se permite código.

        Un saludo!

        Eliminar
    35. Probé una plantilla que se venden en internet de una empresa especializada y está bastante bien posicionada en google, de hecho es de las que siempre sale en cualquier recopilatorio de plantillas modernas para blogger. Le haces el test mobile y supuestamente es responsive tal cual dice, pero en mi móvil no se ve bien, hago la misma comprobación con el enlace que pusiste http://mobiletest.me/ y efectivamente tiene el mismo problema en algunos teléfonos. Me pongo en contacto con ellos y la respuesta es que como el test de google lo da por bueno ellos dicen que es responsive y que no pueden hacerse cargo de que funcione en 1300 tipos de móviles diferentes.
      Mi pregunta es ¿esto es así y es lo habitual?

      ResponderEliminar
      Respuestas
      1. Hombre, deberían de darte un soporte mejor, la verdad. La mía se ve bien en prácticamente todos los móviles pero dependiendo de algunas resoluciones puede darte problemas en algunos márgenes o detalles pequeños.

        Los problemas suelen venir producidos de pequeños ajustes que hay que hacer en las hojas de estilo, prueba con esto: http://www.diariosdelanube.com/2013/07/guia-para-trabajar-con-hojas-de-estilo.html

        Cualquier cosa aquí estoy.

        Un saludo!

        Eliminar
    36. En visto de que no puedo contar con su creador, me propongo como reto intentar resolverlo yo. Para ello planeo que no salga en la versión mobile la parte de la plantilla que queda demasiado ancha para una pantalla pequeña, que es el principal error que le veo. Pero no se trata de un widget sino de un trozo de código, por lo que cuando pongo
      <b:if cond='data:mobile == "false"
      Aqui la parte que no va bien en móvil
      </b:if
      el resultado es que da un error al mostrar la web que dice
      TEMPLATE ERROR: Invalid data reference mobile: No dictionary named: '' in: ['blog', 'skin', 'view']

      Muchas gracias por tu respuesta y por tu paciencia.
      Saludos

      ResponderEliminar
      Respuestas
      1. Muchas veces sucede eso porque la plantilla completa depende de parte de la plantilla para conformarse. Prueba a buscar dónde tienes que cerrar el </b:if porque puede que lo estés cerrando en algún punto crítico para que se dibuje el resto de la plantilla.

        El problema de porqué se dibuja incorrectamente en algunas resoluciones tu plantilla será porque no tiene mediaqueries para esas resoluciones.

        Las Mediaqueries sirven para decirle al navegador "cuando tu resolución sea tal, adapta las hojas de estilo para que dibujen los objetos a tal tamaño". Por ejemplo, en Diarios de la nube yo uso esta Media query para los móviles que tienen como resolución 1080p:

        @media only screen and (max-width:1080px) {
        #header-wrapper, #outer-wrapper, #footer-widgets, .container, #featuresticker, #featuredhome-wrap {
        width: 960px;
        }
        .span-24 {
        width: 709px;
        }
        #featurehomer .label_with_thumbs li, #featurehomer img.label_thumb, #featurehomer .label_with_thumbs a {
        width: 200px;
        }
        #main-wrapper {
        width: 625px;
        }
        post h2 {
        width: 340px;
        }
        #main-wrapper {
        width: 620px;
        }
        #rsidebar-wrapper {
        width: 300px;
        }
        .post h2 {
        width: 340px;
        }
        }

        Si te fijas, lo que hace es alterar el tamaño de varias clases de las hojas de estilo para que los componentes se adapten al tamaño de la resolución sobre la que se van a dibujar.

        Cualquier duda aquí estoy.

        Un saludo.

        Eliminar
      2. Hola! me ha servido mucho este articulo, pude colocar los widget pero estos me salen al final del blog, y yo los quiero a un lado :( y el fondo de blog por alguna no se ve bien en el celular no se si puedo establecer otro color de fondo para la vista del celular? ayuda y gracias!

        Eliminar
    37. Hola! me ha servido mucho este articulo, pude colocar los widget pero estos me salen al final del blog, y yo los quiero a un lado :( y el fondo de blog por alguna no se ve bien en el celular no se si puedo establecer otro color de fondo para la vista del celular? ayuda y gracias!

      ResponderEliminar
      Respuestas
      1. ¡Hola!, se hace utilizando las hojas de estilo en combinación con los condicionales de Blogger.

        En Diarios de la nube tienes varias guías para aprender a utilizar las hojas de estilo y lis condicionales, a la derecha tienes el buscador para localizar los temas que necesitas.

        Básicamente debes bucar la joja de estilo que se encarga del "background-color" de tu plantilla y poner un "if cond" (condicional de Blogger) para activarlo sólo si se cumple la condición de que se esté visualizando la web por un móvil.

        Tienes varias guías para hacerlo en esta web y mi ayuda en todos los comentarios.

        Un saludo!

        Eliminar
    38. Hola Miguel,

      quiero crear un blog y recomendar productos de afiliado de Amazon, y cuando pego el codigo HTML si visualiza correctamente des de la tablet o móbil, pero en canvio no se visualiza la imagen del enlace cuando lo visualizo des del escritorio.

      Tengo un post de prueba en http://booksandvinils.blogspot.com.es/

      ¿Sabes por que motivo no se visualiza en el escritorio?

      Gracias.

      ResponderEliminar
    39. Ya he encontrado el problema, estaba con el complemento de Adblock que no me dejaba visualizar el anuncio.

      Gracias.

      ResponderEliminar
      Respuestas
      1. Hola Ramón, me alegro de que descubrieras el problema. Un saludo y muchas gracias a ti por participar y aportar.

        Eliminar
    40. Hola! Tengo una consulta, quiero inhabilitar la versión móvil de mi blogger desde el código html. Cómo lo hago?

      Desde la opción del menú de plantilla a pesar de tenerla inhabilitada, no funciona al ver el sitio desde tablet o celular.

      Te agradecería pudieras ayudarme, saludos cordiales!
      Te comparto nuestro sitio que es un diario digital www.elchelenko.cl

      ResponderEliminar
      Respuestas
      1. La activación o desactivación de la plantilla para móviles sólo se puede hacer desde la zona de configuración de la plantilla, donde sale una "preview" del móvil a la derecha de la plantilla con una ruedecita dentada debajo. Ahí desactiva el uso de la plantilla para moviles. Cuando alguien se pone una plantilla externa de tipo responsive o simplemente no quiere utilizar la plantilla para móviles, es ahí donde tiene que desactivarla.

        Un saludo y muchas gracias por participar.

        Eliminar
    41. Hola Miguel, una consulta. En mi blo www.agendadepagos.blogspot.com tengo colocado un menu horizontal que esta hecho de un código html puesto como widget en el cross-col y luego con CSS darle un buen aspecto. QUiero en la versión movil de mi pagina modificarla para que el menú salga -como he visto en otros- un botón y al hacer click sobre éste se desplieguen los elementos del menú de forma vertical para que puedan ser vistos cómodamente. Trato de interpretar tu lección sobre el tema en el apartado a) y que dice: «a) Puedes dividir código poniendo y justo debajo los widgets que quieres que se dibujen para móvil y después un con los que quieres para ordenador, o simplemente cerrar con el , de manera que lo de dentro del es lo que quieres que se muestre para móvil.» No lo puedo interpretar Miguel. En mi plantilla el widget de HTML esta identificado con el título 123
      Espero, como otras veces, tu sugerencia. Saludos y gracias

      ResponderEliminar
      Respuestas
      1. Yo te recomiendo que pruebes este tipo de menú: http://www.diariosdelanube.com/2016/03/como-crear-un-menu-pantalla-completa.html

        Cualquier cosa pregunta lo que necesites. Un saludo!

        Eliminar
    42. Muy útil esta información que comparten, espero poder aplicarlo.

      ResponderEliminar
      Respuestas
      1. Me alegro que te sirva. Haz pruebas en un blog de pruebas y luego lo trasladas al tuyo.

        Cualquier duda aquí estoy.

        Eliminar
    43. ¡Hola!, Quiero cambiar el tipo de letra para la platilla movil, entendí el paso en el que encuentro como cambiarlos, pero... tendrás o sabrás que linea de codigo debo escribir para poder hacerlo...

      ¡Muy buen post, saludos!

      ResponderEliminar
    44. Hola, es tocar la hoja de estilos de tu web. Escríbeme la dirección y te digo dónde.

      Un saludo!

      ResponderEliminar

     

    © 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.