Início > Blocos Prontos > blogger mobile > Blogger Profissional > blogger responsive > como editar a versão mobile do blogger > curso blogger > curso blogspot > mudar a versão mobile do blogger > Versão Mobile no blogger

Como modificar a versão Mobile do Blogger?

Os templates mobile no Blogger são essenciais para melhorar a experiência de navegação em dispositivos moveis e também melhorar os rankings nas buscas orgânicas.

Os templates mobile geralmente são mais “leves”, carregam mais rápido e são diferentes da versão desktop.

Ao ativar a versão mobile do Blogger é um pouco complicado de fazer modificações no template, então segue as 3 formas que eu uso para criar um Blogger Profissional.

O blogger disponibiliza automaticamente algumas versões mobile para seu site, porém essas versões prontas não podem ser editadas 100%, algumas pessoas perdem classificação no ranking do Google por não conhecerem as técnicas de template mobile... Quando você acessa o Painel do Blogger > Tema > Configurações de Celular aparecerão algumas opções de template mobile, a maioria das pessoas escolhem as opções “Personalizar” ou “não... mostrar tema de PC no celular”.

Mesmo baixando um template pronto, muitas vezes precisamos ajustar a versão dele para mobile e existem 3 formas para fazer isso:

Nas Propriedades de cada widget, quando agente escolhe “personalizar” e salva... Muitos Templates não aparecem no celular do jeito que gostaríamos, para que o carregamento fique mais rápido, porém, caso você queira exibir um widget que tenha sido ocultado basta você adicionar a propriedade “MOBILE”

Mobile=”yes” – elemento carregado no template mobile e no desktop;

Mobile=”no” – elemento excluído no mobile mais aparece no desktop;

Mobile=”only” – exclusivo do template mobile;

Por exemplo, imagine que pretende carregar um elemento exclusivamente no template mobile. Deveria adicionar o código mobile=”only”:

<b:widget id='BlogArchive1' title='Blog Archive' mobile='only' type='BlogArchive'>

Através de uma Condicional Já vimos em outros posts também algumas condicionais para conteúdos em páginas, existe uma condicional para dispositivos mobile. Essa condicional pode ser usada para executar códigos exclusivos na versão mobile:

<b:if cond="data:blog.isMobile">

[ CONTEÚDO MOBILE AQUI]

</b:if>

Você pode combinar várias condicionais para obter os resultados desejados.
Pelo CSS Por último deixei a versão mobile pelo CSS, para que esse método funcione você deve antes de criar o código modificar a tag <body> para <body expr:class='"loading" + data:blog.mobileClass'> ... Depois basta adicionar a class “.mobile” nos elementos que pretende personalizar. Por exemplo:

.posts{

text-decoration: underline;}

Estilo do texto em desktop

.mobile .posts{

text-decoration: none;}

Estilo do texto diferente em mobile

Salve as alterações e verifique se as alterações foram aplicadas conforme o seu projeto.

Existem vários tipos de blocos prontos, basta você copiar e colar para dentro do seu blogger.

Espero ter te ajudado, tentamos sempre ser direto ao ponto na hora de tirar suas dúvidas, mais se caso ainda não entendeu alguma coisa deixe seu comentário a baixo que responderemos assim que possível.
Acompanhe nosso blog para aprender técnicas e deixar seu blogger cada dia mais Profissional.

Compartilhar:

4 comentários:

Descobrindo Vida

boa

Postado em: 28 novembro, 2020

Gilmar de Oliveira

Bom dia! Sabe me informar o porquê de algumas postagens, as mais recentes por exemplo, estarem aparecendo na versão celular mesmo acessando pelo computador? Obrigado

Postado em: 08 outubro, 2021