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

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

Publicado em 07/03/2018

Tempo de leitura:

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:




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!





11 comentários via Blogger
comentários via Facebook

11 comentários:

  1. Vou dar uma olhada. Preciso aprender umas coisas rsrsr, aliás, muita coisa.
    Obrigada.
    Beijos.
    blogjoturquezzamundial
    blogaustraliacomcappuccino.

    ResponderExcluir
    Respostas
    1. Jô, veja as séries mais recentes, tem passo a passo inclusive em vídeo, creio que ajudarão :)
      bjsss

      Excluir
  2. Eu peguei um template seu personalizado com o tema contempo. Será que funciona?

    ResponderExcluir
    Respostas
    1. Sil, eu nunca disponibilizei nada usando Contempo...
      Se for o modelo que está em seu blog agora ele usa a base Viagem, então sim, pode usar os códigos ou usar os mais completos que disponibilizei no tutorial anterior à este.

      bjssss

      Excluir
  3. Elaine
    Você é incrível,já consigo até mexer no Html,coisa que achava impossível,graças aos seus tutoriais que são verdadeiras aulas.Vou esperar pela personalização do Tema Simples,que você já adiantou que vai ensinar.Depois faço essa parte de tornar o blog responsivo.
    Beijos,boa tarde!

    ResponderExcluir
    Respostas
    1. Maria, na verdade eu não vou ensinar não, como eu disse no texto a personalização é por conta da pessoa.
      Se der tempo eu vou disponibilizar uma base já personalizada, talvez usando o Simples, mas ainda não sei ao certo...
      Mas seguindo as dicas e tutoriais do blog você conseguirá personalizar sem problema...
      beijossss

      Excluir
  4. Adoro muito seus tutos, sempre me ajudam demais. Esse foi mais um que deu super-certo. Sou muito grata!

    ResponderExcluir
  5. Você arrasa! <3 Mas eu acho que algo mudou no Blogger, minha barra lateral ficava oculta pelo celular e agora não fica mais. Nos testes web da tudo certinho. Penso que pode ser com apenas alguns modelos, o meu é o Espetacular. Fiquei triste :(

    Parabéns pelo seu trabalho! Beijos blogtanamoda.com

    ResponderExcluir
  6. Adorei o tutorial, Elaine!
    Muito bem explicado. Deu tudo certo!
    Obrigada!

    ResponderExcluir
  7. só conseguir achar o codigo no meu blog de testes , mas no meu blog original não consegui achar. :( o código e diferente e fiquei com medo de mexer.

    ResponderExcluir

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…