Como Adicionar Gadgets na Versão para Celular do Blogger

É possível colocar gadgets no template para celular do seu blog e assim manter as pessoas mais tempo no seu site. Normalmente o Blogger já oferece alguns modelos de layout para celular, smartphone e tablet, mas um uma pequena alteração de HTML podemos adicionar qualquer gadget na versão do nosso blog para celular (versão mobile).

Adicionar Gadgets na Versão para Celular do Blogger


Antes de começar adicione o gadget que deseja usar na versão mobile (celular, smartphone) do blog. Entre na pagina modelo e clique na imagem de engrenagem que está abaixo do seu template para celular do blogger, escolha a opção personalizar e salve as alterações

Como Adicionar Gadgets na Versão para Celular do Blogger

Agora clique no botão editar HTML e procure pelo código do gadget (como achar o código do gadget) que você quer mostrar na versão para celular e adicione o código: mobile='yes'.

Por exemplo, no caso do gadget marcadores o código ficará deste jeito:

<b:widget id='Label1' locked='false' mobile='yes' title='Marcadores' type='Label'>

Agora o gadget dos marcadores aparecerá também na versão para smartphones do seu blog. Se quiser mostrar algum gadget somente no celular em vez de usar a palavra yes no código troque por only, então aquele gadget não aparecerá no seu blog na versão para web, mas aparecerá no celular, neste caso o código fica assim:

<b:widget id='Label1' locked='false' mobile='only' title='Marcadores' type='Label'>

Não funcionou no meu Blog


Em alguns testes que fizemos quando alteramos para o modelo de template personalizado para celular não funcionou corretamente, ou seja, apareceu mais ou menos o mesmo template para web (template comum), mas se trocar para qualquer template padrão do blogger funciona.

Infelizmente se for esse o seu caso terá que escolher entre ficar com seu Template atual ou usar gadgets no template para celular do seu blog. Não estamos dizendo que seria impossível corrigir essa falha, mas ela varia para cada template e você precisa entender de HTML e fazer testes até corrigir o problema.

Ter uma Versão para Celular do Blog é Importante?


Talvez você esteja se perguntando qual a importância dos gadgets do blog no celular ou gastar tempo com o template para celular do seu blog. Então queremos lhe fazer uma pergunta: Qual a percentagem de visitas via mobile (celular e tablet) do seu blog?

Se você não sabe a resposta e faz algum tempo que não olha as estatísticas do contador de visitas sobre isso arrisque um palpite antes de olhar. Eu acredito que se surpreenderá (De onde vêm as visitas do blog? Web, Imagens ou Celular?). Depois compare as estatísticas com o ano anterior e verá que houve um grande aumento no numero de visitas via celular.

Para terminar um lembrete sobre o tempo de carregamento do site, talvez você esteja testando isso no seu blog usando internet wi-fi na sua casa, mas lembre-se que a maioria usa internet móvel comum que é muito lenta, portanto não exagere nos gadgets na versão para celular do seu blog.

36 comentários:

  1. como retirar versão celular no blogger?
    tipo qnd acesso meu blog no celular fica versão gostaria que fica-se versão normal

    ResponderExcluir
  2. Roger
    veja na imagem que publicamos no tutorial logo no topo da imagem abaixo de Modelo > escolher modelo para celular tem as opções:

    sim, mostrar ....
    não mostrar ....

    se escolher a opção não, então seu blog mostrará a versão para web no celular, mas acho que isso vai deixar seu blog muito lento no celular

    ResponderExcluir
  3. Olá, Fabiano! É possível na página Layout do Blogger mudar as posições dos gadgets usando um smartfone? Com o meu smart não consigo. E com um tablet? Dizem que os notebooks e computadores de mesa vão dar lugar aos tablets e smarts. Mas como os blogueiros vão mover os gadgets em seus blogs?

    ResponderExcluir
  4. Claudio

    Acho que por enquanto não é possivel mover os gadgets pelo aplicativo do blogger... talvez se conseguir entrar na versão para web do blogger então consiga mudar a posição dos gadgets a partir do seu celular ou tablet.

    mas eu não acredito que os tablets ou smartphones vão substituir os notebooks ou computadores... cada um deles é destinado a uma coisa.

    ResponderExcluir
  5. Olá, Claudio! Quando adiciono o código: mobile='yes' no gadget, dá erro. Me ajuda resolver isso.

    ResponderExcluir
  6. deve ser algum detalhe por exemplo falta ou excesso de espaços em branco antes e depois do código

    em todos os testes que fiz funcionou... tente excluir o histórico de internet pode ser falha no carregamento da pagina

    ResponderExcluir
  7. aqui funcionou perfeitamente galera, de primeira, óima dica, vejo tudo pelo celular também

    =oD

    ResponderExcluir
  8. Ótimas dicas! Hoje em dia é muito importante tem um layout legal para acessoa por celular... O número de visitantes vem aumentado cada dia mais através dos acessos mobile. Poderia falar um pouco mais sobre como configurar os layouts para cel para blogger?

    ResponderExcluir
  9. por enquanto não tem muito o que configurar o blogger para celular.

    podemos adicionar gadgets como mostramos neste tutorial, mas não adicione muitos pois a internet via celular normalmente é lenta e se o seu site demorar muito pra carregar vai perder visitas por falta de paciência das pessoas esperarem seu blog carregar.

    ResponderExcluir
  10. Como faço para que, na versão mobile, os gadgets estejam um abaixo do outro?

    ResponderExcluir
    Respostas
    1. normalmente os gadgets aparecem um embaixo do outro no celular...

      Você ativou a versão para celular do seu blog como está na imagem deste post?

      se baixou seu template pronto e está dando esse problema então o erro está no template e infelizmente em alguns casos é mais fácil trocar o template do que corrigir os erros.

      Excluir
  11. Boa tarde, é possível adicionar link para o blog na versão mobile no modelo janela de imagem? Eu adicionei um código HTML com link fui lá no HTML onde se encontrava o código HTML java script adicionei o comando mobile='only' fui ver no meu blog modelo mobile não apareceu o link será que esse modelo não suporta o comando JavaScript HTML? Existe uma outra forma sem mudar o modelo janela de imagem? Agradeço desde já.

    ResponderExcluir
    Respostas
    1. você alterou o modelo para celular para "personalizado" como está na imagem deste tutorial?

      na pagina editar html é para colocar mobile='only' no gadget e não no código javascript, ou seja, o código javascript tem que ficar dentro de um gadget de html/javascript.

      se fez isto tudo e não deu certo talvez o JavaScript não funcione no celular ou usa um script grande demais que trava.

      faça o teste, adicione um gadget de html/javascript apenas com texto e depois altere com o JavaScript que você quer.

      Excluir
  12. Deu super certo de primeira, mas tem uma coisa que eu gostaria de saber se tem como mudar. O meu gadget, no caso o menu, ficou embaixo de todas as postagens e gostaria que ele aparecesse logo abaixo do cabeçalho. Tem como mudar a posição dele apenas no mobile?

    ResponderExcluir
    Respostas
    1. você deve ter colocado o gadget na sidebar do blog... tente mover esse gadget para baixo do cabeçalho assim ele deve aparecer logo abaixo do titulo do seu blog

      Excluir
  13. Fabiano,
    Adicionei uma imagem ao lado do logotipo do header de meu blog. Até aí tudo bem, mas quando fui ver na versão para celular, a imagem que adicionei ficou desalinhada, e muito pra direita, gerando até uma barra de rolagem desnecessária.

    Segue anexo, pra explicar melhor: (http://i.imgur.com/No51lFf.png)

    ResponderExcluir
  14. a versão para celular as vezes dá esse tipo de diferença...

    provavelmente você está usando algum CSS float para deixar o botão ao lado... sugiro que remova e deixe o botão ficar embaixo.

    para resolver o problema do posicionamento tem que fazer testes no seu html até achar algo que fique bom na versão para celular e computador... mas não tenho como dizer extremamente o que modificar no seu html.

    você pode também tentar mover o código do botão para outro lugar no html .. e dependendo usar dois códigos separados: um para o botão para celular e outro para computador..

    ResponderExcluir
    Respostas
    1. Fabiano,
      Agradeço pela resposta! Mas tomei como exemplo outro tutorial da internet, em que ensina como adicionar um campo de busca no cabeçalho do Blogger, e que o código do campo deve ficar logo abaixo das seguintes linhas:

      Show the image only div id='header-inner'

      []'s

      Excluir
  15. o código only no html eu só usei em gadgets como está no tutorial.

    é possivel usar condicionais b:if cond=.....
    para fazer o botão separado para cada versão (mobile e computador), assim poderia usar códigos e formatações diferentes em cada botão para fazer os ajustes

    aqui tem um tutorial sobre condicionais
    http://www.dicasparablogs.com.br/2016/04/codigos-tags-condicionais-blogger.html

    a condicional da versão mobile é
    < b:if cond='data:blog.isMobile' >

    o código ficaria mais ou menos assim:

    < b:if cond='data:blog.isMobile' >
    código do botão para celular
    < b:else/ >
    código do botão para computador
    < /b:if >

    ResponderExcluir
    Respostas
    1. Valeu pela dica, Fabiano!
      Apliquei uma espécie de tag condicional mobile, e está funcionando perfeitamente. Agora, tentarei adicionar o mesmo botão abaixo do logotipo do header, só que na versão pra celular.

      Tem alguma dica de qual tag móvel pertence ao trecho do cabeçalho?

      Excluir
  16. a tag pra movel é aquela que mostrei porém já outras em varios tutoriais sobre o assunto.... mas não tenho o link deles...

    tente pesquisar pelo código no google

    ResponderExcluir
  17. Eu já li vários blogs e sites tentando explicar esse assunto mas garanto que este tutorial foi realmente satisfatório!

    ResponderExcluir
  18. Oi Fabiano!
    Qual condicional eu uso para colocar 'mobile='only' em um código que foi colocado diretamente no HTML e não no gadget?
    Obrigada!

    ResponderExcluir
  19. use esse código para criar condicional no html:

    < b:if cond='data:mobile' >

    códigos para versão mobile

    < /b:if >

    ResponderExcluir
  20. Verifiquei e esse código já existe no meu blog, eu repito o mesmo código? No meu caso é um banner, quero que ele apareça na web e mobile.
    Obrigada.

    ResponderExcluir
    Respostas
    1. mas o código do banner já está lá no trecho pra versão mobile?

      se tiver deve veja se o b:if não fecha antes do código do banner... pois era para funcionar

      Excluir
  21. É um banner 336x280, ele também aparece na versão móbile. Estou inserindo com uma condicional para não parecer na página principal, mas aparecer em todas as outras páginas. Preciso que ele apareça também na versão mobile. Atualmente está assim:


    CÓDIGO DO ADSENSE JÁ CONVERTIDO

    ResponderExcluir
    Respostas
    1. as vezes o lugar que colocou está dentro de outro código que não é para aparecer na versão mobile.

      tente fazer um teste, em vez do código do adsense apenas escreva uma palavra para ver se aparece no lugar que você quer, por exemplo escreva: anuncios

      depois se aparecer vc troca pelo código...

      se for no final das postagens pode ser nas divs post-footer-line-1 ou algo parecido com isso

      Excluir
    2. Valeu Fabiano. Lendo sua resposta para o problema do amigo, me liguei de porque estava não estava aparecendo os gadgets na versão mobile. Fui ver e adicionei o dentro do código sidebar-left e tem que adicionar no sidebar-right para aparecer no mobile.

      Excluir
    3. é bom saber que conseguiu resolver

      Excluir
  22. Obrigada. Só deu certo quando adicionei esse [mobile='only']

    ResponderExcluir
  23. Como encontrar um template para o blogger?

    ResponderExcluir
    Respostas
    1. no google é só pesquisar template para blogger, mas não sei qual recomendar pois não uso template pronto.

      sugiro que pesquise e na hora que escolher um template faça um backup do seu template atual antes de instalar o novo, assim poderá voltar ao modelo atual com facilidade.

      Excluir