add

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

¿Cómo hacer Responsive las imágenes de mis post de Blogger?

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

¿Cómo hacer Responsive las imágenes de mis post de Blogger?

3 Un clic en “Editar HTML

¿Cómo hacer Responsive las imágenes de mis post de Blogger?

Ahora se le abrirá el Editor HTML de su plantilla

¿Cómo hacer Responsive las imágenes de mis post de Blogger?

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.

¿Cómo hacer Responsive las imágenes de mis post de Blogger?

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

0 comentarios:

Publicar un comentario en la entrada

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios