Página Principal Menú Charkleons Radio Online Facebook - Charkleons.com YouTube - Charkleons.com Twitter - Charkleons.com

Cómo adaptar tu blog para diferentes resoluciones de pantalla

Blogger para resoluciones HD - Charkleons.com

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 / Avanzado 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:


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

A veces también podría pasar que blogger no permita que se guarde el cambio hecho a la plantilla, por experiencia he resuelto esto pasando a otro blog creado en blogger, ingresan a Tema / Editar HTML, hacen cualquier cambio o modificación en la plantilla, guardan, y luego pasan al blog principal para volver a hacer el cambio, esa vez es probable que se guarde el cambio. Otra cosa que se puede hacer es esperar un minuto y volver a guardar para luego confirmar que se haya hecho el cambio, a veces puede presentarse ese fallo por una demora en la carga del cambio.

También pueden aprovechar para aumentar el ancho de una plantilla básica de blogger que por lo general no supera los 1500px y darle desde ese mismo código un ancho de 2400px desde la parte que se muestra en la imagen que está a continuación.



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 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.

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,

5 comentarios:

Gracias por comentar.