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:
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 ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' 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?
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
ResponderExcluirsim, 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.
ExcluirEu 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
Como que eu coloco o leia mais em um template ja responsivo ?
ExcluirCamilo, vc quer colocar posts resumidos ou só o link Leia mais?
ExcluirSe for colocar os posts resumidos aqui no blog tem tutorial, procure ali na aba Dicas para blogs.
Se for o link Leia mais aí depende de seu template mas em geral não dá pra fazer em templates baixados da internet...
Parabéns Elaine! Suas sérias estão perfeitamente explicadas!Muita luz pra você! Beijos
ResponderExcluirAle, muito obrigada!
Excluirbjssss
Elaine, definitivamente você não existe! Nunca vi ninguém com tamanha bondade em compartilhar conhecimento próprio assim. Parabéns por tudo!!!
ResponderExcluirOlha, 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!!
Jackeline, não tem segredo não fia rsrsr
ExcluirQuando 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
elaine é normal que quando ta no celular ele fica um espação dos lados ?
ResponderExcluirSim, 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...
ExcluirOlá 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?
ResponderExcluirEu 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.
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.
Excluirbjsss
Era exatamente isto Elaine, muito obrigada!! Você é um amor! bjs.
ExcluirElaine 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.
ExcluirBlog: hpmteste.blogspot.com.br
Obrigada!
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).
ResponderExcluirComo 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.
Para poder dar alguma dica que ajudasse eu precisaria ver o blog, saber qual modelo base usou, etc...
ExcluirEu usei o tema Viagem mesmo. Dê uma olhada no meu blog de testes https://blogtitule.blogspot.com.br
ExcluirTalvez o erro esteja em /* LAYOUT GERAL
ExcluirAo 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
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.
ResponderExcluirBlog: hpmteste.blogspot.com.br
Obrigada.
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.
Excluirbjssss
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!
ExcluirMarcia, além de alterar o que falei experimente colocar o código html abaixo de < / header >
ExcluirSeparei 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
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?
Excluirhttps://hpmteste.blogspot.com.br/
Obrigada.
Marcia, aí tem que editar o slide.
ExcluirNo 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
Oi Elaine, primeiro, muito obrigada por compartilhar informações preciosas. Fiz os passos da primeira série e conclui o "Catherine", hoje fiz o passo a passo para torna -lo responsivo, ao concluir e testa lo no site duas coisas não ficaram ok: o "share box" não ficou menor como o da sua exibição e no final dos posts entre os botões de compartilhamento e marcadores surgiu uma imagem "icon action"
ResponderExcluirAgradeço desde já pela atenção, bjs
*endereço blog de teste:https://blogmarqtbranco.blogspot.com/
Anna, acessei o blog agora e pra mim está absolutamente normal.
ExcluirDeu certo corrigir os erros?
bjssss
Oi Elaine! Esse tutorial serve para qualquer template desenvolvido por vc? Eu estou usando o Violeta.
ResponderExcluirLuana, funciona sim, o Violeta usa a base Viagem, mas como o design dele é diferente do Catherine precisará de um pouco mais de conhecimento em media queries, mas funciona sim...
Excluirbjssss
ensina a cria um template para blog do zero por favor já procurei aqui na net e ninguém ensina direito ?
ResponderExcluirOi, faz tempo que acompanho seu blog, que por sinal sempre ajuda. Hoje estava procurando algo e no Google, me indicou este tutorial, mas foi em vídeo, como gosto de ler preferir vim aqui, mas gostaria de saber: Só serve os do próprio Blogger? Eu quero deixar um template que eu uso há anos, cujo é personalizado, que baixei na época, mas não é responsivo. Tentei com ajuda deste tutorial, mas nenhum código que eu procuro no meu, aparece.
ResponderExcluirJonas, essa forma de fazer só testei nos nativos do Blogger. Baixado da internet eu nunca testei... então não sei dizer se funciona ou não.
ExcluirCreio que não...
Moça, ferrou meu blog todo :´(
ResponderExcluirElaine, o tutorial funcionou mas tem um problema na sidebar. Tive que trocar a sidebar esquerda pela direita porque fica tudo fora do lugar. E ainda assim sobra um pequeno espaço entre a sidebar e a área dos posts. Como resolver isso?
ResponderExcluirPatrícia, qual o endereço do blog? Vc usou um template do modelo Viagem?
ExcluirSim, é aquele modelo com fundo de papel e que vem com o plano de fundo de um avião rsrs
ExcluirEndereço do blog: https://winxclubfadas.blogspot.com
Patrícia, a separação entre a sidebar e a coluna lateral pode ser alterada na área que começa com
ExcluirLAYOUT GERAL
Tudo aí é editável, vá lendo o código e altere os valores em margin, até ajustar como deseja.
Para mudar a sidebar da direita para a esquerda e não desconfigurar também é nessa parte do c[odigo.
Troque tudo que for right por left.
Mas tem que testar, ajustar, etc...
O código está pronto para sidebar a direita, e o modelo Viagem que usei para criar o c[odigo é o que destaco no tutorial, o que tem o fundo escuro e sidebar já separada. Por isso aparecerão pequenas variações no modelo que vc usou :)
bjssss
olá dica perfeita , funcionou legal mas gostaria de lhe perguntar comom faço para que uma imagem de w=150 h=200 fique lado a lado com outras 4 imagens do mesmo tamanho, porque lhe pergunto isso ? pois em configurações de tela de 320 x 480 elas ficam uma abaixo da outra , mesmo usando display: inline-block;
ResponderExcluirPara alinhar imagens assim seria preciso usar a propriedade table. Só assim o alinhamento lado a lado se manteria. Mas as imagens ficariam bem pequenas em resoluções como a que menciona...
Excluir
ResponderExcluirTentei baixar Templates que já se dizem responsivos e nada funciona =(
Juliana, tem que deixar marcada a opção Computador em Tema/Configurações do celular.
ExcluirSe não fizer isso pode acontecer da responsividade do tema não ser "ativada"
Fiz no meu blog de testes e deu errado, ai fiz no meu blog oficial mas prestando atenção e lendo os posts e deu certo
ResponderExcluirOlá Elaine, quanto você criaria um template para o meu blog? Parabéns pelo seu trabalho.
ResponderExcluir