Cómo adaptar tu blog para diferentes resoluciones de pantalla

Blogger para resoluciones HD

Este tema es solo para las personas que usen las plantillas de Blogger. Si no usas estas plantillas, revísalo y tal vez te pueda servir. Visualizando TV CHARKLEONS en la PS4 que tiene una resolución nativa de 1080p, noté que sobraba mucho espacio a los lados, igualmente con Charkleons.com. Y cuando quise aumentar el ancho de la página (plantilla de blogger) ya era demasiado ancha para la resolución de la tv que uso como pantalla, y hacia salir una barra para desplazamiento horizontal en la parte inferior, lo cual es muy molesto. 

Entonces me puse a buscar cómo corregir esto para que sin importar el ancho que tenga la página, se visualice correctamente en cualquier pantalla (resolución)... y no encontré nada fácil, todo eran cosas de hacer capas css, cambiar líneas de la plantilla donde salen las medidas en píxeles, por medidas en porcentaje, descargar archivos .js y luego subirlos para usarlos en la plantilla, etc, etc, etc, mejor dicho... o sea, cosas muy complicadas. Y entonces pensando, como sí en los dispositivos móviles se adapta el ancho de la página fácilmente, debería haber algo igual en blogger, o en HTML que pudiera hacerlo en la plantilla, ya que los que toman la información de la misma, o los que leen los comandos para mostrar la página son los navegadores, y estos se van actualizando de una forma seguida permitiendo que todo sea más fácil. Y a través de prueba y error encontré cómo hacerlo fácilmente en Blogger, les comparto la solución.

Recuerden sacar siempre un respaldo de la plantilla antes de hacer cambios en ella.

Lo que vamos a hacer es cambiar en la plantilla este comando «$(content.width)» por «auto». Entonces van a Plantilla / Editar HTML, y buscan la línea: 

<b:template-skin>...</b:template-skin>

Importante: esta línea podría no salir si aún no han aumentado el ancho de su página desde la parte de Plantilla / Personalizar / Ajustar ancho.


Ya estando en la plantilla, abren la línea

 <b:template-skin>...</b:template-skin> 


Y buscan lo siguiente:


Como podrán ver, hay cuatro líneas donde está el comando «$(content.width)» esto es lo que vamos a reemplazar por «auto» como se muestra en la siguiente imagen:


Guardan la plantilla, recargan la página, y notarán como se adapta el ancho a la resolución de sus pantallas. En dado caso de que antes se visualizara con la barra para desplazamiento horizontal en la parte inferior, ya no lo hará.

Esta información es muy útil porque por lo general los que tenemos páginas o blogs, casi siempre basamos el diseño en la pantalla que usamos, y en la actualidad ya es muy común que las pantallas para PC, o los Smart TV que se usan como pantallas tengan una resolución HD, o 1080p, o incluso superior. Entonces con esta modificación podremos aumentar el ancho de la página para que se visualice de una mejor manera en resoluciones HD, pero también al mismo tiempo se visualizará correctamente en las pantallas tradicionales.

Cuando estaba haciendo las pruebas así se visualizaba el blog de pruebas antes del cambio, sobraba mucho espacio a los lados.


Luego de aumentar el ancho a 1400px se visualizaba con la barra para desplazamiento horizontal (imagen recortada porque era muy ancha).


Y luego de hacer el cambio que les compartí en la plantilla se corrigió este fallo. La página se adaptó a la resolución de la pantalla.  


Como pueden darse cuenta es un cambio muy sencillo de hacer.

Información probada en todas las plantillas de blogger con varias y pocas columnas.

Espero que esta información les sea muy útil.

Gracias.


Cómo aumentar el ancho del blog, cómo hacer para que el ancho del blog se adapte a las resoluciones de distintas pantallas, cómo quitar la barra horizontal de abajo, mi página se ve mal en distintas resoluciones, blog adaptado a la resolución de la pantalla del usuario, adaptar el blog a la resolución de pantalla del visitante, cómo hacer que el ancho del blog sea variable, cómo se ajusta el ancho de la plantilla, mi blog no se visualiza bien en resoluciones hd, mi blog no se visualiza bien en pantallas antiguas, ajustar el blog a diferentes pantallas blogger, responsive and adaptive width in blogger, adaptive width for diferents resolutions blogger, responsive resolution in blogger, ancho adaptable de blogger, quitar la barra horizontal de abajo en blogger, ancho del blog para pantallas hd,