En estas épocas en las cuales la navegación a través de dispositivos motiles tales como tablets o teléfonos inteligentes se han puesto muy de moda a tal punto que ya representan un porcentaje importante del total de la navegación mundial por Internet, bien vale la pena adaptar la plantilla de nuestros blogs a estos aparatos móviles.

En el día les enseñare como hacer responsive o adaptable a distintas resoluciones de pantalla las imágenes de tu blog y entradas.

Adapta tu plantilla al diseño "Responsive"


Para empezar, crea páginas mucho más flexibles y fáciles de reorganizar si se necesita modificar el diseño. Al garantizar que la hoja de estilo permita adoptar un diseño líquido, ya estas en camino de adaptarnos al mundo de los móviles. En lugar de especificar un valor  en el parámetro width, para los elementos contenedores, empiezas a usar un valor de max-width. En lugar de height indica la min-height, para que las fuentes más grandes y los textos de varias líneas no superen los límites del contenedor. Para evitar que las imágenes con ancho fijo se salgan de las columnas líquidas, aplica la regla CSS siguiente:

img {
  max-width: 100%;
}

El anterior codigo lo deberas pegar justo antes de  ]]></b:skin>

Con ese pequeño fragmento de CSS harás que las imágenes de tu blog se adapten a cualquier resolución de pantalla.

Si tienes alguna duda o sugerencias no dudes en comentar, que te responderemos lo mas pronto posible.

Categorías: Trucos Blogger

9 comentarios

Esneider Arbey Manzano Arango · septiembre 22, 2013 a las 7:10 pm

estas asociado con el blog de terreno blogger por que el diseño se parece mucho, lo demás se ve muy bien pero el menu es muy ancho y me cansa la vista, saludos!

    Hayder Juvinao · septiembre 30, 2013 a las 7:26 pm

    Amigo, eso depende de la resolución que uses, si usas una inferior a 1280 px se vera el menú largo como tu dices.

    Saludos

tribunaram · septiembre 23, 2013 a las 1:05 pm

me podrias pasar el codigo de tu indice para meterlo en mi blog?

Gracias

Namir Criollo · septiembre 25, 2013 a las 11:45 pm

Hola Hayder!
Hace poco cambié el ancho total de mi blog de 1100 px a 1024 para que justamente sea más fácil eso de que se adapte a las disntitas resoluciones de las pantallas, no sé si era necesario ese cambio porque no tengo un móvil para comprobarlo.
¿Es necesario que cumpla con estas medidas para ese truco que has puesto en tu entrada o da igual que mida 1100 como 1355 px por ejemplo?

    Hayder Juvinao · septiembre 30, 2013 a las 7:32 pm

    Namir el ancho del blog no tiene que ver con este truco.

    Saludos

Korbataz · noviembre 26, 2013 a las 1:11 am

buenas noches
Al introducir el css sise sjusta las imagenes completas en el celular pero se distorsionan se ven como alrgadas, sera que hqy que tambien pober el largo al 100%

Korbataz · noviembre 26, 2013 a las 1:14 am

buenas noches :
Al aplicar el codigo css si se acopla la imagen al ancho del celular, pero se deforma la imagen alargandose ¿Cual es la sollución?
gracias de antemano

ruben iglesias perez · marzo 24, 2014 a las 9:32 pm

hola hayder, [-( mi blog en el pc de un amigo no se ve igual,la cabecera esta distorsionada,el tiene un portátil con la pantalla mas alargada y supongo que es por esto y que en los ipads puede pasar lo mismo,me sirve este truco para que se vea bien la cabecera? la diseñe yo,gracias socio por todo,he puesto muchos de tus trucos en mi blog 😎

Responder a Hayder Juvinao Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *