Como tornar responsivo um template nativo do Blogger- passo a passo completo - * Blog Elaine Gaspareto *

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

Publicado em 05/03/2018

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?




22 comentários via Blogger
comentários via Facebook

22 comentários:

  1. Obrigada por essa nova série, acompanhei a anterior, meu blog ficou lindo e agora ele está respondido, nem acredito rsrs só não sei pq o " QUERO CONTINUAR LENDO" desconfigurou! Teria como vc me falar o que pode ter acontecido? Beijooos http://www.blogsorrisosecachos.com.br/?m=1

    ResponderExcluir
    Respostas
    1. sim, eu sei o que há. Será preciso ajustar as definições do botão Leia mais/Quero continuar lendo para que le se ajuste as resoluções de tela.
      Eu vou tratar disso no terceiro tutorial da série, sabe onde falo que teremos um post específico sobre media queries? Então, dentre outras coisas será isso.
      Me manda seu email, vou tentar te ajudar antes disso...
      bjssss

      Excluir
  2. Parabéns Elaine! Suas sérias estão perfeitamente explicadas!Muita luz pra você! Beijos

    ResponderExcluir
  3. Elaine, definitivamente você não existe! Nunca vi ninguém com tamanha bondade em compartilhar conhecimento próprio assim. Parabéns por tudo!!!

    Olha, quando trocamos e-mail (pq sou muito inxirida) até hoje não sei como você soube o tamanho exato do meu logo/cabeçalho que é 436px ao invés de 548px, só de olhar meu blog. Meu queixo caiu e ainda não o levantei.

    Obrigada meu amor, vou seguir esses tutoriais em outro blog!!

    ResponderExcluir
    Respostas
    1. Jackeline, não tem segredo não fia rsrsr
      Quando vi seu blog eu já sabia que o erro estava na medida do header. Aí, pra saber exatamente a medida dele basta clicar sobre a imagem com o botão direito do mouse e seguir o comando Procurar imagem no Google.
      Aí abrirá a página de busca com a imagem e as medidas dela.
      Simples rsrsrrs
      beijossss

      Excluir
  4. elaine é normal que quando ta no celular ele fica um espação dos lados ?

    ResponderExcluir
    Respostas
    1. Sim, dependendo da base que estiver usando será preciso ajustar co CSS pra retirar espaço mas espaçamento pode ser bom, dá respiro ao texto...

      Excluir
  5. Olá Elaine muito obrigada pelas suas séries estão me ajudando muito a montar um blog. Será que você poderia me tirar uma dúvida, por favor?

    Eu fiz um blog de testes chamado https://hpmteste.blogspot.com.br/ utilizei o seu template Catherine e fiz a série de responsividade. Quando visualizo o blog em http://www.comofazerumsite.com/design/testar-resolucoes-de-tela.html ele aparece correto, porém quando visualizo no meu celular, está totalmente desconfigurado, sem menu, sem fundo, etc...

    O que será que pode estar acontecendo?

    Obrigada.

    ResponderExcluir
    Respostas
    1. Marcia, você provavelmente não configurou corretamente a exibição em celular. Vá em Tema e no item Celular marque a caixinha Não. Mostrar tema para computadores em dispositivos móveis.
      bjsss

      Excluir
    2. Era exatamente isto Elaine, muito obrigada!! Você é um amor! bjs.

      Excluir
    3. Elaine boa tarde! só mais uma coisinha, como eu faço para colocar o menu abaixo do meu cabeçalho? no seu tema Catherine ele fica lá no topo. Já olhei o código onde tem o menu, mas não consegui entender onde devo alterar.

      Blog: hpmteste.blogspot.com.br

      Obrigada!

      Excluir
  6. Usei os códigos no template que criei, e a sidebar tá ficando pro lado nas telas de celular e tablet (por causa do espaçamento entre a mesma e o feed de posts).
    Como eu posso centralizar no meio, para quando estiver no celular ou tablet?

    Para começar, tentei editar os media queries, zerando esse espaçamento, e colocando margens laterais para sidebar, específicas para cada tamanho de tela, tudo bem calculado. Para alguns tamanhos de tela quase dá certo, e outros, não mesmo.

    Então tem como fazer isso, sem ter que calcular esses números todos?

    Obs.: A sidebar não tem cor de fundo.

    ResponderExcluir
    Respostas
    1. Para poder dar alguma dica que ajudasse eu precisaria ver o blog, saber qual modelo base usou, etc...

      Excluir
    2. Eu usei o tema Viagem mesmo. Dê uma olhada no meu blog de testes https://blogtitule.blogspot.com.br

      Excluir
    3. Talvez o erro esteja em /* LAYOUT GERAL
      Ao invés de definir os valores em px precisa ser em %
      Se vc define que o layout será fluido, ele não pode ser limitado por medidas em px, entende?
      Copie o código como disponibilizei e só altere as porcentagens, sem incçuir valores em px.
      Talvez resolva...
      E para mudar o posicionamento da sidebar não adianta alterar o valor usando px, o posicionamento se altera mudando os valores margin. Isso na Coluna lateral direita, caso sua sidebar fique a direita, claro.
      Aí tem que ir mexendo pra ajustar, lembrando que valores positivos aproximam e valores negativos afastam.
      Sim, é uma trabalheira rsrsrsr

      Excluir
  7. Olá Elaine bom dia! Poderia me dar uma dica, por favor, como eu faço para colocar o menu abaixo do cabeçalho? eu usei o template Catherine, porém não estou sabendo como colocá-lo abaixo.

    Blog: hpmteste.blogspot.com.br

    Obrigada.

    ResponderExcluir
    Respostas
    1. Marcia, experimente trocar, no código CSS a palavra fixed por relative, mas tem que testar pois esse menu foi configurado pra ser assim, fixo no topo.
      bjssss

      Excluir
    2. Só alterar no CSS a palavra Fixed não funciona. Já mexi em várias configurações e não altera para ficar abaixo do cabeçalho. De qualquer forma muito obrigada por sua atenção!

      Excluir
    3. Marcia, além de alterar o que falei experimente colocar o código html abaixo de < / header >
      Separei os caracteres pra que o Blogger aceite, mas é pra procurar tudo junto, é a tag que fecha o cabeçalho, cole abaixo dele e o menu vai posicionar.
      bjsss

      Excluir
    4. oi Elaine parece que trocando o código html para depois do fim do Header realmente funciona, o problema é que o carrossel está sobrepondo o menu. Tem alguma forma de colocar o carrossel mais abaixo?

      https://hpmteste.blogspot.com.br/

      Obrigada.

      Excluir
    5. Marcia, aí tem que editar o slide.
      No tutorial que ensino sobre ele tem como editar, se não me engano...
      Nos tutoriais que usamos para personalizar o template tem, certeza. Procure ali no menu, Série como personalizar o blog passo a passo :)
      bjssss

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…