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 antiguas. Y tal vez no funcione si blogger actualizó la plantilla y encriptó parte de su código, y después la usen ustedes. Las nuevas ya son responsive y no necesitan que se les haga este ajuste.

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á. Si se llegará a visualizar la barra en la parte inferior, modifiquen el ancho de alguna de las columnas que debe estar haciendo que no se haga bien el ajuste.

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.

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

Gracias.

Comentarios

Charkleons.com

Entradas populares de este blog

¿Qué animal soy en el Horóscopo Chino?

Colores HTML

Animales internos y Animales secretos