¿Cómo hacer Responsive las imágenes de mis post de Blogger?
¿Quiero que mis imágenes se hagan Responsive y se ajusten al tamaño de la entrada cuando se abra mi blog desde un teléfono? ¿Necesito un código para que las imágenes de las entradas de mi blog de Blogger se hagan Responsive y se muestren correctamente en un SmartPhone? ¿Cómo ajustar el tamaño de las imágenes de los post de mi blog de Blogger cuando se habrá mi blog desde un teléfono inteligente? Si estabas buscando este truco de Blogger de como ajustar el tamaño de las imágenes automáticamente cuando se habrá su blog de Blogger desde un teléfono inteligente, le diré que ha llegado al sitio adecuado.
Existen diferentes tamaños de teléfonos como: 320, 460, 568 y 768 que es de una tableta.
Explicación:
Lo que vamos hacer es insertar unos códigos con diferentes puntos de interrupción, para cada tamaño de teléfono incluyendo a las tabletas también, con esto cuando un usuario encuentra su blog desde un teléfono inteligente, cuando lo abra se mostrara un tamaño optimizado de su imagen, que se ajusta al tamaño de pantalla del teléfono que esté utilizando.
Ventajas:
- Carga ligera de la imagen
- Ajuste automático de la imagen dependiendo del tipo de pantalla
Vamos a trabajar
1 Ir a Blogger
2 Un clic en “Plantilla”
3 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
4 Busca este código
<head>
Ingrese la siguiente línea de código justo abajo del código que encontró
<meta content='width=device-width, initial-scale=1,
maximum-scale=1' name='viewport'/>
|
Nota: si en su blog ya dispone del anterior código ya no es necesario insertarlo, pero si no lo tiene recuerde agregar el código
5 Busca este código
]]></b:skin>
Ingrese las siguientes líneas de código justo abajo del código que encontró
<style>
/* Puntos de interrupción Imágenes optimizadas */
/*-----iPhone 2G, 3G, 4, 4S Punto de interrupción Vertical ----------*/
@media only screen and (max-width:320px) {
#main, .post, .comments {width:94%!important;
overflow:hidden; }
.comments .comments-content {width:94%!important;}
.post a img, .post img{max-width:94%; height:auto;}
}
/*-----iPhone 2G, 3G, 4, 4S Punto de interrupción Horizontal ----------*/
@media only screen and (max-width:480px) {
#main, .post, .comments {width:95%!important;
overflow:hidden; }
.comments .comments-content {width:95%!important;}
.post a img, .post img{max-width:95%; height:auto;}
}
/*-----iPhone 5,6 Punto de interrupción 3 ----------*/
@media only screen and (max-width:568px) {
#main, .post, .comments {width:96%!important;
overflow:hidden; }
.comments .comments-content {width:96%!important;}
.post a img, .post img{max-width:96%; height:auto;}
}
/*-----iPads, Tablets Punto de interrupción 4 ----------*/
@media only screen and (max-width:768px) {
#main, .post, .comments {width:98%!important;
overflow:hidden; }
.comments .comments-content {width:98%!important;}
.post a img, .post img{max-width:98%; height:auto;}
}
</style>
|
Según la plantilla que utilice puede ir variando el tamaño de las imágenes, para ajustar este tamaño y llegar al adecuado, puede ajustar el tamaño en los números que están marcados de color amarillo
6 Eso es todo, un clic en “Guardar plantilla”
Mire su blog desde un teléfono inteligente o en un emulador móvil de su computador
¡Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo saber
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Hola!, acabo de aplicar estos cambios en mi blog, pero la cabecera (que es una imagen) y el carrusel , no se adaptan a la versión web del móvil. El resto va perfecto.
ResponderEliminar¿Cómo podría hacerlo?. Muchísimas gracias
gracias exelente, habia buscado esto en muchos lugares incluyendo youtube, mil gracias, buenas vibras amigo
ResponderEliminar