Cómo adaptar tu blog para diferentes resoluciones de pantalla

Este tema es solo para las plantillas de Blogger antiguas. Las nuevas ya son responsive y no necesitan que se les haga este ajuste. Luego de aplicar este consejo el ancho que se le dé a las columnas influirá mucho en el ancho real de la página o blog.

Lo primero es entrar a Tema / Personalizar / Ajusta ancho a la parte donde se ajusta el ancho, y modificarlo. Esto hará que después podamos visualizar en la plantilla las partes que se van a modificar.

Luego vamos a Tema / Editar HTML para cambiar este comando $(content.width) por auto. 

Entonces van a Tema / Editar HTML, y buscan la línea: 

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

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

Ya estando en la plantilla, abren la línea  <b:template-skin>...</b:template-skin>  y buscan lo siguiente:

Abrir la línea es hacer clic sobre la flecha que está a la derecha del número.

Pero antes debemos dejarle un ancho más acorde para las nuevas pantallas o Televisores, eso lo modifican desde esta parte:

Ahora sí buscan esta parte que está debajo de lo anterior:

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.

Importante: Confirma el ajuste en un dispositivo móvil, si por ejemplo las imágenes de los temas quedan sobre las columnas tocaría ajustar el ancho de las columnas. Este cambio se ajusta más a diseños que solo tienen una columna además del cuerpo principal donde van los temas. Tal vez te pueda interesar el siguiente tema: Imágenes Responsive en Blogger

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 para trabajar en el blog, 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 FHD, o 4K. Entonces con esta modificación podremos aumentar el ancho de la página para que se visualice de una mejor manera en esas resoluciones, 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 con las medidas predeterminadas de Blogger. Si se visualizara en una pantalla FHD sería aún más grande el espacio que sobraría.

Luego de aumentar el ancho a 2400px se visualizaba con la barra para desplazamiento horizontal.

Y luego de hacer el cambio que les compartí en la plantilla se corrigió este fallo. La página se adaptó a las medidas que le dimos.  

Como pueden darse cuenta es un cambio muy sencillo de hacer. Recuerda, si se hace este cambio debes tener en cuenta que las imágenes deben ser grandes o se visualizarán diminutas en una resolución FHD.

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

Gracias.

como quito la barra de desplazamiento que sale al final de mi página, quitar barra de abajo del blog, quitar barra horizontal de abajo, cómo hago que mi página se vea bien en pantallas hd, cómo hago que mi blog se vea bien en pantallas hd tv, blog responsive en 4k, cómo hago para que mi página o blog ocupe toda la pantalla,