Série Como tornar responsivo um template nativo do Blogger- tutorial para todos os modelos

Olá, gente querida!
Conforme eu prometi no primeiro tutorial da Série Como tornar responsivo um template nativo do Blogger (onde aprendemos um passo a passo bem completo de como tornar responsivo um template que use o tema-base Viagem) hoje vou te ensinar como tornar responsivo qualquer template nativo do Blogger!

Vamos fazer isso com os modelos Simples, Marca d'água, Espetacular, Celestial e Janela da imagem, em todas as versões.
E caso seu template seja personalizado usando como base qualquer modelo desses o tutorial também poderá ser aplicado ao seu blog.

Avisos importantes:
✔ Essa série de tutoriais não se aplica aos demais modelos nativos, tipo Visualizações dinâmicas ou os novos templates tipo Soho, Notável, etc pois esses já são responsivos e não aceitam edição.
✔ Essa série de tutoriais também não se aplicam aos blogs personalizados que usem modelos mais antigos do Blogger, como o antigo (#rip) Mínima.
✔ Obviamente, se seu blog já é responsivo esses códigos não se aplicam a ele, ok?
✔ Como eu sempre digo: faça os testes em um blog de testes. Aplique nesse blog de testes seu template, igualzinho está em seu blog real, e aí faça os testes.
Só faça em seu blog real depois de haver dominado os paranauês todos!
✔ O tutorial de hoje não ensinará personalização. Vamos aplicar os códigos que definem a responsividade nos templates sem personalização alguma.
Personalizar é contigo, e pra isso você pode ver as centenas de tutoriais que há aqui no blog:

Todas as dicas para personalizar o blog

Como tornar responsivo qualquer template nativo do Blogger- tutorial para todos os modelos

Para começar você precisa saber qual o modelo de seu blog.
Caso ele tenha sido personalizado por outra pessoa terá que perguntar pra essa pessoa qual base ela usou.
Se ele ainda não passou por personalização é só olhar o código-fonte dele e aparecerá, bem no começo, os créditos e o nome do modelo.
Normalmente está em ingles, mas é simples:
Simple- Simples
Etheral- Celestial
Watermark- Marca d'água
Awesome- Espetacular
Travel- Viagem

Também é possível ver qual modelo está em seu blog indo em Tema/Personalizar.
Aparecerá o nome do modelo que está sendo usado no blog.

Modelo identificado, é só usar os códigos correspondentes de cada modelo e fazer exatamente o que cada passo solicita.
Veja os códigos correspondentes de cada modelo:


Copiar os códigos

Gravei a execução do passo a passo em vídeo, pra não restar dúvidas.
Aperta o play e acompanhe a execução em todos os modelos nativos do Blogger:


Aproveita que estamos papeando e se inscreva no canal do blog; ele serve de apoio aos tutoriais do blog e me ajuda muito quando você se inscreve ou compartilha os vídeo-tutoriais!

Finalizando:
Os códigos e explicações do tutorial de hoje são os mais básicos possíveis.
Teste como eu fiz no vídeo, em todos os modelos, seja curioso, curiosa, fuce mesmo, aprenda.
Aprender, gente querida, não ocupa espaço e faz a gente crescer!

No próximo post da Série Como tornar responsivo um template nativo do Blogger eu vou entrar no assunto emocionante e divertido das media queries.
Aí você aprenderá o básico de como usa-las para ajustar coisas como botão Leia mais (caso seu blog use), postagens relacionadas e como personalizar detalhes do template, além de um pouco de teoria.
E teremos template free pra baixar! Uma base limpa, clean e já responsiva!

Caso você tenha perguntas diga nos comentários aqui no blog e eu ajudo assim que possível.
Até o próximo tutorial, que será em breve!