Como deixar o blogger responsivo | Quero Dicas | Tutoriais para seu blogs


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:

Transformando o blog em responsivo

5. Apos escolher e visualizar como deseja que ser visualizado, 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)

Gostou? Ajudou? Deixe seu comentário! Beijinhos

Me Contrate!



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

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.