Série Como tornar responsivo um template nativo do Blogger? - * Blog Elaine Gaspareto *

Série Como tornar responsivo um template nativo do Blogger?

Publicado em 27/02/2018

Série Como tornar responsivo um template nativo do Blogger?

Em termos de blogs, a última bolacha de chocolate do pacote, atualmente, é o design responsivo.
Isso é fácil de entender pois a imensa maioria das pessoas acessa a internet (e portanto, os blogs) de um smartphone ou tablet.
Assim, ter um template que se adapta automaticamente a qualquer resolução de tela é importante e talvez até indispensável se você quer crescer seu blog e manter seu leitor satisfeito.

Para nós, que usamos o Blogger/Blogspot como plataforma de publicação, há duas maneiras de conseguir que o blog seja friendly mobile: uma extremamente fácil e simples e outra mais complexa e completa.
Maneira fácil: adaptando-o para a versão mobile do template (disponível para todos os templates nativos do Blogger)
Maneira complexa e completa: usando um template responsivo.

Tempos atrás eu publiquei uma série de tutoriais aqui no blog que ensina como personalizar um blog na versão mobile.
Dentre outras coisas eu ensinei como ativar a versão mobile e personalizar, exibindo gadgets nessa versão, etc... E tem template gratuito para baixar, já personalizado na versão mobile.
Confira:

Conferir os posts da série


Agora vou publicar outra série, ensinando Como tornar responsivo um template nativo do Blogger.
Não se trata apenas de ativar a versão mobile, será uma série de posts bem mais completos e profundos!

Vamos aprender como pegar qualquer template do Designer de Modelo comum do Blogger e torna-lo completamente responsivo, usando media queries e recursos de CSS modernos e compatíveis.
E, claro, mantendo tudo do Blogger, toda a facilidade que a gente ama: a facilidade de mudar cores e fontes através do painel do Blogger, a facilidade de personalizar e incluir elementos de página.
E a possibilidade de aplicar os tutoriais que você encontra aqui no blog.
Um template nativo, limpo e sem bugs, mas totalmente responsivo.
E o melhor de tudo?
Numa linguagem simples e didática, como você está acostumado/a a ver aqui no blog.

Serão (provavelmente) 4 posts, publicados sequencialmente, e ao final vou disponibilizar 2 bases responsivas gratuitas, para você baixar, editar como desejar e usar em seu blog.
E para não ficar só na apresentação da minissérie vamos conversar brevemente para que você entenda o que é design responsivo, qual a diferença entre responsivo e adaptado, quais as resoluções de tela mais comuns e outras coisas mais!
Vem comigo!

O que é design responsivo?


Claro que há explicações bem mais técnicas, profundas e completas para responder a esta pergunta, mas como sempre vou tentar ser o mais simples e didática possível, ok?
Afinal essa é uma minissérie destinada especialmente a quem é iniciante e/ou não possui formação nem grandes conhecimentos em web design.
Explicação dada, vamos à resposta:

Design responsivo é o design que se adapta a qualquer tipo de tela (televisão, computador, tablet, smartphone) e a qualquer resolução de tela (1152x864, 1366x768, 1600x1200, etc).
Se eu tivesse que resumir design responsivo em uma imagem seria essa:

O que é design responsivo?

Quer ver um exemplo prático?
Clique aqui (vamos usar muito esse site ao longo da nossa minissérie), digite https://www.elainegaspareto.com na barra de teste e a seguir clique em Testar.
Vá testando as várias resoluções de tela e formatos e veja na prática o que é um blog responsivo.

Percebe que a tela se ajusta e exibe conteúdo ideal para cada tamanho de tela e para cada resolução?
Então, isso é um blog responsivo. E é isso que vamos fazer com seu blog.

Perguntas que podem surgir quando falamos em design responsivo


Perguntas que podem surgir quando falamos em design responsivo

1- Não sei se meu blog é ou não é responsivo...
Simples de descobrir: coloque o endereço dele no site que indiquei acima e teste.
Se ele se adaptar significa que é responsivo.
Outra forma ainda mais simples de descobrir é clicando no quadradinho do meio ali na barra de navegação da página. Sabe ali no canto direito, entre o X e o sinal de -? Clica, a janela vai redimensionar e seu blog acompanhar significa que ele é responsivo. Veja como o meu se adapta.


2- Meu blog é adaptado para celular. Significa que é responsivo?
Não.
Ser mobile friendly não torna o blog responsivo, mas ajuda muito na visualização para celular.
Como expliquei neste post aqui é possível tornar os templates do Blogger mobile friendly facilmente.
Dá pra ir quebrando o galho até você aprender como transformar seu template em um com design responsivo.

3- Ao tornar um template responsivo (ou usar um já responsivo) todos os elementos de página do blog tais como menu, postagens relacionadas, etc... se tornarão automaticamente responsivos?
Não!
Se você inserir um menu não responsivo em um template responsivo o menu continuará sendo não responsivo.
O mesmo vale para slides, botões de compartilhar, etc...

4- Templates baixados da internet são responsivos?
A maioria, sim.
Claro que também é possível baixar gratuitamente um template responsivo da internet.
Há muitos sites, alguns inclusive bem bons, que disponibilizam versões gratuitas de bons templates responsivos.
E há as versões pagas, algumas bem em conta.
Dá sim pra usar e até pra personalizar (até certo ponto) templates baixados gratuitamente da internet.

Pessoalmente eu não gosto porque esses templates não podem ser personalizados via painel do blog, apresentam alguns erros estruturais difíceis de serem corrigidos e/ou descobertos, além de outros bugs e problemas.

Por isso prefiro sempre usar e personalizar um template nativo do Blogger. Sem códigos maliciosos e sem surpresas ao longo do uso.
Mas, repito: seu blog, suas regras.

Meu objetivo aqui, contudo, é te ensinar de modo simples como tornar responsivo um template nativo do Blogger.
Falou, querido leitor?

Então fica combinado: nova série do blog, vamos aprender como tornar responsivo qualquer template nativo do Blogger.
E vamos começar com 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 se prepare!
Vai ser muito legal!


Como não perder nenhuma atualização do Blog Elaine Gaspareto?


E para não perder e nem esquecer nenhum post da série você pode curtir nossa fanpage pois todos os links são compartilhados lá assim que o post entra no ar:


Ou, se preferir, pode receber um aviso em seu email assim que o post for ao ar.
Cadastre-se, é grátis e você não perderá nenhum post!

Digite seu endereço de email:






6 comentários via Blogger
comentários via Facebook

6 comentários:

  1. Elaine, minha querida! Levei um susto quando vi a taxa de rejeição do meu blog no google analytics, devido a ter colocado um template não responsivo!
    Me obriguei a trocar correndo de novo, dessa vez pelo responsivo! E como confio muito no seu trabalho, utilizei o seu novamente. Misturei Catherine com Clarissa, fiz uns ajustes, umas mudanças, e até que gostei do resultado! rsrs
    Espero não ter infringido nenhuma regra de uso fazendo isso e que você aprove o resultado!
    Vou acompanhar essa série ansiosa, pois aprendo muito com voce! Quem sabe até me arrisco a mudar de novo, depois que vc disponibilizar as bases... hehe
    Beijos queridona! E obrigada por ser tão dedicada e nos ajudar muito!
    Aline Star

    ResponderExcluir
    Respostas
    1. Aline, pode editar os templates sim, só não pode retirar os créditos, mesmo que mude muita coisa.
      Não espere as bases, crie um blog de testes, instale o Catherine nele e vamos fazer juntas. Vai ser melhor, assim vc aprende desde o começo e vai vendo as possibilidades!
      beijossss

      Excluir
  2. Seu blog é demais, segui os tutoriais de criação do template Catherine, e agora estou na espera de como torna-lo responsivo, agradeço muito pela ajuda que você dá a mim e tantas outras blogueiras <3

    ResponderExcluir
    Respostas
    1. Camila, o post tá pronto, só faltam uns detalhes. Você vai conseguir fazer com certeza, é bem simples!
      beijosss

      Excluir
  3. Elaine, minha salvadora risos, dei uma olhada nessa pagina de teste para ver se o meu é responsivo e verifiquei que em algumas resoluções de tela, ele dá erro ou corta algumas coisinhas. Com o seu post será possível arrumar isso ou será que é melhor eu usar outro template?
    Beijokas

    ResponderExcluir
    Respostas
    1. Vivianne, o segundo tutorial mostra como tornar responsivo o tema-base que usamos na Série Como personalizar o blog passo a passo, e o o terceiro tutorial vai ensinar como tornar responsivo todos os outros modelos nativos, mas em se tratando de templates já personalizados creio que não será possível usar pois os códigos já foram muito mexidos e também eu não sei qual base a pessoa que personalizou usou.
      Talvez seja o caso de ir montando aos poucos um template do zero, com base na série anterior e aí sim aplicar a responsividade como explico...

      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…