Como la mayoría ya sabemos, Blogger nos introduce por defecto una plantilla para móviles pero a muchos usuarios les resulta insuficiente o no les termina de agradar.
Para esos usuarios que usan ese tipo de plantilla os voy a mostrar fácilmente la forma de adaptarla al tamaño responsive. Solo hay que realizar unos sencillos pasos que estoy seguro que podreis realizar.
No en todas las plantillas predeterminadas se realiza de la misma forma pero todas tienen en común casi el mismo código. Antes de empezar os dejo una demostración realizada en una plantilla predeterminada
"Sencillo".
Antes de proceder a realizar cualquier cambio en la plantilla, procurad siempre realizar una copia de seguridad de ella. Es importante por si se produce algún fallo, tener siempre un respaldo.
Para plantillas: Sencillo y Filigrana
Primer Paso:
Desactivar la barra de navegación de blogger
(navbar). Diseño-barra de navegación-editar- "No"- y guardar.
Paso 2:
Hacer la imagen de la entrada en tamaño responsive. Buscamos el siguiente código en la plantilla:
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
y reemplazamos por este otro:
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
Paso 3:
Eliminamos el código predeterminado de blogger para móvil y buscamos de nuevo el siguiente código:
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
y reemplazamos por este otro:
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Paso 4:
Colocamos la forma responsive antes de
</head>
<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>
Para plantillas: Fantastico y Etereo
Realizamos todo lo anterior menos el
paso 2 donde buscaremos el siguiente código:
.post-body img {
Eliminamos todo el CSS interior y colocamos en su lugar:
padding: 0;
width:auto;
max-width:100%;
height:auto;
Para plantillas: Picture Windows y Viajes
Realizamos todo lo anterior menos el
paso 2 donde buscaremos el siguiente código:
/* Posts
y añadimos lo siguiente:
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
Hecho!!! Ahora la plantilla predeterminada de blogger está en Responsive.
Publicaciones Relacionadas
trucos blog
