Como tornar responsivo um template nativo do Blogger- passo a passo completo

Conforme prometi na publicação de apresentação da Série Como tornar responsivo um template nativo do Blogger vou começar usando como base o Template Catherine, que desenvolvemos na Série Como personalizar o blog passo a passo.
Veja a série, deixe seu blog de testes pronto (ou baixe o Template Catherine, se preferir) e vamos trabalhar!

Como sempre venho tentando fazer eu gravei a execução desse tutorial em vídeo.
Aperta o play, veja a realização do passo a passo e se restar alguma dúvida diga nos comentários e eu ajudo assim que possível!



Antes, um comentário:
Existem outras várias formas de tornar responsivo um template nativo do Blogger.
Eu conheço ao menos umas 5 formas diferentes mas esse passo a passo que vou te ensinar hoje é exatamente o passo a passo que desenvolvi e usei em meu blog.

Fui juntando informações, mesclei algumas coisas, inventei outras e cheguei a esses códigos. Funcionam sem erros, são fáceis de aplicar e personalizar e o melhor de tudo: são limpos, nada de scripts e nada pesado. Por tudo isso é o meu método preferido para aplicar responsividade aos templates que personalizo/personalizei.

Como tornar um template que use o tema-base Viagem totalmente responsivo?

Para começar, claro, você precisa ter o blog de testes já pronto, com o Template Catherine instalado e configurado.
Semana que vem vou ensinar o básico de como tornar responsivo qualquer template nativo do Blogger, mas para esse primeiro tutorial vou usar a nossa base, personalizada a partir do modelo Viagem, ok?
Se preferir usar o tema-base Viagem sem personalizar, também dá certo.
Blog de testes pronto?
Abra a página com os códigos que vamos usar hoje:


Copiar os códigos

A seguir acesse a aba Tema de seu template e clique na ferramenta de edição do item Celular.
Marque  Não. Mostrar tema para computadores em dispositivos móveis.
Salve.
A seguir clique em Editar HTML.
Vamos fazer um passo a passo básico, é só copiar e colar.
As explicações do que cada coisa faz serão as mais simples possíveis, e o código que define a responsividade vou explicar num tutorial posteriormente.

1- Corrigir o viewport do template:
Bem no comecinho do código-fonte localize esse trecho:

<meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

Selecione todo o trecho, conforme marcado na imagem:

E substitua pelo CÓDIGO VIEWPORT.
Salve.

Por que fizemos isso?
Para adequar a janela de exibição do blog (viewport) a qualquer resolução de tela.


2- Configurar a área geral do blog:
Localize, no código fonte de seu template, esse trecho:
.content-inner {
E selecione todo o trecho, assim:

Substitua pelo CÓDIGO CONTENT INNER e salve.

Por que fizemos isso?
Para que, no caso dos templates que usam a base do tema Viagem, a porcentagem da área dos posts e da coluna lateral não varie, independente da tela que o leitor usar.
Nesse caso eu defini que a área total do template seria de 1300px.
Poderia ser mais, poderia ser menos, mas essa medida é a mais harmônica para blogs, em minha opinião. Tem espaço de sobra para posts e sidebar, e tem espaço de respiro para o leitor.
Futuramente você pode alterar, mas por enquanto siga minha recomendação.

3- Ajustar a área do header:
Localize:
.Header .description {
  font-size: 130%;
}
E abaixo disso cole o CÓDIGO DE AJUSTE DO LOGO.
Salve.

Entenda o código:
#Header1_headerimg {
width: 100%; - não altere
max-width: 581px; - largura total de seu logo. Altere com a medida exata dele.
height: auto; - não altere
margin: 6em auto; - distancia do logo em relação ao topo, altere para subir ou descer o logo
margin-bottom: 3em; - distancia do logo em relação a parte de baixo do blog; altere para subir ou descer o logo
}

Por que fizemos isso?
Para posicionar corretamente o logo/nome do blog e para que ele seja redimensionado automaticamente de acordo com a resolução/tela de cada leitor.

4- Alterar o corpo do template:
Localize:
.main-inner {
E selecione até achar ÁREA DOS POSTS.
E substitua pelo CÓDIGO LAYOUT GERAL.
Salve.
Calma que nessa hora estará tudo desconfigurado, dá um mini-desespero mas vai dar certo.

Por que fizemos isso?
Essa alteração serve para ajustar as distancias entre a sidebar e a área dos posts. Também serve para ajustar as medidas do layout pois no passo seguinte vamos excluir as configurações nativas que definem o layout.

5- Correção de erros e ajuste na responsividade:
Localize a tag de fechamento ]]></b:skin> e acima dela cole o CÓDIGO DE AJUSTES
Salve.

Por que fizemos isso:
Esses 2 códigos são responsáveis por ajustar posicionamento de imagens e elementos do post, ajustar imagens e vídeos nos posts e na sidebar e corrigir quaisquer erros que o template possa apresentar quando visualizado em smartphones e tablets.

6- Ajustando o corpo do layout:
Agora localize isso:
<b:template-skin>
E selecione até o fechamento da skin, assim:
</b:template-skin>
Apague tudo, sem dó.

No lugar cole o CÓDIGO MEDIA QUERIES
Salve.

E chegamos na parte mais importante da nossa saga!
Esse código CSS  que define a responsividade que eu disponibilizei é fluído, ou seja: ele é editável e cada template precisará ter essa definições personalizadas de acordo com cada blog.
O código que montei se aplica especificamente ao Template Catherine.
Ele ajusta os posts relacionados, o posicionamento dos títulos da sidebar, etc...
Cada template terá suas próprias media queries e isso a gente aprende praticando e entendendo o que cada item quer dizer.
Voltarei nesse tópico ao final dessa série pois ele é bem complexo. Terá um post só pra falar de media queries, aguarde!

Se tudo deu certo seu blog, usando o Template Catherine que estamos personalizando desde a Série Como personalizar o blog passo a passo, está pronto e responsivo!
Confira aqui:
Testar resolução de tela e responsividade
(digite https://template-catherine-responsivo.blogspot.com/ e teste a responsividade do meu blog de testes)

E por hoje terminamos!
No próximo post da Série Como tornar responsivo um template nativo do Blogger vamos aprender os comandos básicos para aplicar a responsividade a qualquer template nativo do Blogger: Simples, Janela de imagem, Espetacular, Marca d'água, Celestial e Viagem.
Assim você vai conseguir aplicar a responsividade em praticamente qualquer template, inclusive os personalizados que usem como tema-base qualquer um desses modelos nativos.
Será incrível!
Espero por ti.
Não vá se atrasar, hein?