20 marzo 2015

Como hacer fácilmente una plantilla predeterminada de blogger "Responsive"

plantilla predeterminada blogger en responsive

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.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

6 comentarios

Muchísimas gracias, ha sido el único tutorial con el que conseguí buenos resultados!!

MUCHAS GRACIAS! Me salvaste la vida con este post. No sabía como adaptarla y no quería modificar todo el aspecto del blog cargándole una plantilla que si fuera responsive. De verdad GRACIAS!
:3
Liz

Buenas tardes, para las plantillas bajadas de internet, sirve lo mismo?

¡Voy a intentarlo, a ver si hay suerte!

Excelente trabajo, muchas gracias, abusando que puedo hacer para solucionar el problema con las imagenes??


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"