Como tornar responsivo qualquer template nativo do Blogger

MODELOS SIMPLES E MARCA D'ÁGUA

Localize:

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

E substitua por:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>



Localize:

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

E substitua por:

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}


Localize:

]]></b:skin>

E cole o seguinte código acima da tag de fechamento localizada:

#Header1_headerimg {
width: 100%;
max-width: 1000px; /* LARGURA DO SEU LOGO OU CABEÇALHO, ALTERE COM A SUA MEDIDA EXATA*/
height: auto;
margin-bottom: -1em;
margin-top: 2em;
}

Cole 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: 800px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {
width: 100%!important;
margin-right: 0!important;}
}
</style>

MODELO JANELA DE IMAGEM E VIAGEM

Localize:

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

E substitua por:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>


Localize:

/* Posts

E cole o seguinte código imediatamente abaixo da linha localizada:

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}


Localize:

]]></b:skin>

E cole o seguinte código acima da tag de fechamento localizada:

#Header1_headerimg {
width: 100%;
max-width: 1000px; /* LARGURA DO SEU LOGO OU CABEÇALHO, ALTERE COM A SUA MEDIDA EXATA*/
height: auto;
margin-bottom: -1em;
margin-top: 2em;
}

Cole 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: 800px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {
width: 100%!important;
margin-right: 0!important;}
}
</style>

MODELOS ESPETACULAR E CELESTIAL

Localize:

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

E substitua por:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Localize:

.post-body img {

Eliminamos todo o CSS anterior e colocamos em seu lugar:

.post-body img {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}


Localize:

.header-inner .Header .titlewrapper {
  padding-top: $(header.padding.top);
}

E cole o seguinte código imediatamente abaixo:

#Header1_headerimg {
width: 100%;
max-width: 1000px; /* LARGURA DO SEU LOGO OU CABEÇALHO, ALTERE COM A SUA MEDIDA EXATA*/
height: auto;
margin-bottom: -1em;
margin-top: 2em;
}


Cole 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: 800px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {
width: 100%!important;
margin-right: 0!important;}
}
</style>

CÓDIGO DE AJUSTES- INDICADO PARA TODOS OS MODELOS

(cole acima de ]]></b:skin>)

/* RESPONSIVOS by Elaine Gaspareto */
img, embed, iframe, object, video, #player {
max-width: 100%;
border:0;
}
/* CORREÇÃO DE ERROS
----------------------------------------------- */
* {
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}