Como deixar o blogger responsivo | Quero Dicas Quero Dicas : Como deixar o blogger responsivo

Quero Dicas : Como deixar o blogger responsivo

Como deixar o blogger responsivo

|


Como deixar seu blog responsivo
Atualmente, grande parte do trafego de um blog é feito por dispositivos moveis (celulares, tablets e notebook), por isso é muito importante todos nós blogueiros (a) estarmos com total atenção a este tipo publico.

Em minhas, incansáveis, buscas de perguntas e respostas, me deparei com este assunto ainda tão polemico "Template Responsivo".

Um template responsivo, precisa ter alguns códigos, à mais, dentro do HTML do blog, para que ele fique exatamente igual ao modelo do seu template. E, adaptar o seu tema para que ele se transforme em responsivo não é tarefa fácil, exige conhecimento de linguagem em html, css e em alguns casos em php.

Como cada template/tema varia de estrutura, seria impossível vir aqui e dar um código a vocês que funciona perfeitamente e se adaptasse ao seu tema.

Claro, existem muitos sites de criação que fazem este tipo de serviço e o valor varia de R$ 200,00 a 1.500,00 reais. Obviamente, são excelentes site que não somente colocam este tipo de personalização, mais também adicionam outras ferramentas tais como, o famoso SEO.

Para quem pode contratar este tipo de serviço, eu super indico. Afinal, são especialistas em otimização e configurações de códigos para a melhoria e desenvolvimento do seu blog/site.
Agora, antes de contratar procure saber se a empresa especializada nesse tipo de serviço tem boas referências. Fica dica!

O fato é que a maioria das pessoas não tem tanto recurso (dinheiro) e "ficam a ver navio" sem saber como proceder e tornar o blog responsivo. Se você é uma dessas pessoas e entende de HTML e CSS, acesse esta o link da postagem ( clique ). Ao acessar, você entenderá e terá a base na hora da sua construção.

Mas se você procura uma alterativa simples, rápida e gratuita e não sente a necessidade de que fique exatamente igual ao seu tema, o próprio Blogger oferece a opção que você mesmo(a) deixe seu blog responsivo. Veja e siga o passo a passo.

Transformando o blog em responsivo

1. Acesse o painel do Blogger

2. Vá em "Modelo"

3. Do lado direito, há uma demonstração do seu blog no formato celular, clique na engrenagem:

Transformando o blog em responsivo


4. Marque a opção "Sim, mostrar modelo para celular em aparelhos celulares" e logo abaixo, você pode selecionar um dos modelos que o Blogger oferece ou opte por Personalizar (se encaixa melhor ao seu layout):

Transformando o blog em responsivo

5. Apos escolher e visualizar como deseja que ser visualizado por seus visitantes, clique em "Salvar".

Pronto. Seu blog já está adaptável a qualquer plataforma.

Conferindo se o blog está responsivo

1. Acesse Teste de compatibilidade do Google.

2. Copie e cole o endereço do seu blog no local indicado e clique em "Analisar"

3. Aguarde o processo e verá que ele está tudo certinho.

Mas atenção! Precisamos conferir e ajustar algumas coisinhas nele para que fique tudo certinho. Continue seguindo o tutorial. =D





Conferindo e acertando o template

Passo 1. Acesse PageSpeed Insights do Google

Passo 2. Copie e cole a URL (endereço) do seu blog, no local indicado, e clique em "Analisar" e espere o processo terminar.

Ele analisará o desempenho do seu blog tais como: Bloqueios, velocidade, etc.

Transformando o blog em responsivo

Passo 3. Ao termino, aparecerá duas (2) seções distintas.

Mobile - Aparelhos moveis (celular, tablet, etc)
Desktop - Computador e notebook

Ambas devem ficar, de preferência, na cor verde.
Mas se ficarem laranja, ainda poderá ficar tranquilo.
Agora se ficou vermelha, preocupe-se!

Se no seu caso ela tenha ficado vermelha. Vamos arrumar, ok? Caso, ambas estejam amarelas, pode pular "Corrigindo". A não ser que queira que fiquem ambas verdes. (risos)

Corrigindo o item em vermelho

1 - Clique sobre o item que está em vermelho.

2 - No item "Considere corrigir: " vá em "Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda", clique no link "Mostrar como corrigir".
Corrigindo o template

3 - Mostrará na própria página vários links e informações.
Note que poderá ter o item "Remova o JavaScript de bloqueio de renderização:" e logo abaixo o caminho (javascript) que está dando, um dos maiores, problema em seu template.

Corrigindo o item em vermelho no blog
4 - Copie o endereço (ou parte dele) e vá no HTML do seu blog (Painel do Blog > Modelo > Editar HTML) e procure pelo js.

4.1 - Assim que o achar, apague-o. Visualize e caso esteja tudo certo, salve.
Faça o mesmo processo em todos os "problemáticos" javascript que apareceram.

Pronto. Seu blog está responsivo e tinindo. (risos)

Beijinhos

Me Contrate!

Compartilhe


6 comentários:


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

Beijinhos ♥

  1. O problema é que geralmente fica muito feio o layout para mobile do Blogger

    ResponderExcluir
    Respostas
    1. Olá, Josi.
      Eu acho legal e até bonitinho. Claro, nada mais bonito e funcional os templates responsivos. Mais gosto do modelo personalizado do Blogger.

      Beijinhos ♥

      Excluir
  2. Muito bom seu post. Descobri vários erros no meu blog....
    Abraços

    ResponderExcluir
    Respostas
    1. Obrigada Rosana por seu comentário =D
      Beijinhos ♥

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir