Adicionar Gadgets no Template para Celular do Blogger

Você pode personalizar o template para celular do seu blog do Blogger adicionando gadgets na versão mobile do Blogger. Veja como configurar o Blogger para permitir adicionar gadgets na versão para celular do seu blog.

Para ativar os gadgets na versão para celular do seu template é necessário entrar na pagina modelo > editar o seu template de celular e escolher a opção personalizar.

Adicionar Gadgets na Versão para Celular do Blogger

Depois disso encontre a linha de código do gadget que deseja e adicione o código mobile='yes', deixando deste jeito:

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

O exemplo é com o Gadget Marcadores do Blog, mas funciona em qualquer gadget (por enquanto em todos que testei).

Usando o código deste jeito o gadget aparecerá no seu template para web (computador e notebook) e também no template para celular ou tablet, mas se quiser pode mostrar um gadget somente na versão para celular trocando a palavra yes por only no código que adicionamos.

Porém se fizer isso esse gadget não aparecerá mais na pagina do Blogger de edição de layout (onde podemos arrastar e adicionar gadget). Portanto se quiser excluir ou alterar a posição deste gadget será necessário retirar o trecho mobile='only' antes de usar a pagina layout do Blogger.

Veja também:
Colocar Anúncios do AdSense na Versão para Celular do Blogger
Seu Blog ou Site Funciona no Celular? - Palestra Adsense
Como Melhorar e Personalizar um Blog - Por onde Começar?

Para terminar queremos lembrá-lo que o tempo de carregamento da pagina é muito importante por isso recomendamos que use gadgets (Quais os Melhores Gadgets) que não deixem seu blog lento na versão para celular.

33 comentários :

  1. Ola pessoal do dicas para blogs, eu gostaria de SUGERIR um tutorial para ajudar o pessoal!

    O tutorial é de como resolver o problema de CNAME, quando a pessoa coloca um dominio no blogger pelo site DOT.TK. Vocês tem tutoriais assim, mas o que acontece é que o dot.tk se uniu ao freenom, nesse site "freenom" não encontrei uma forma de adicionar o cname, e não existe nenhum tutorial sobre isso ainda na internet.

    Enfim, eu descobri uma maneira de estar colocando o CNAME no dot.tk, sem ser pelo freenom, para tirar o erro que dava ao adicionar a url .tk no blog.

    Se vcs estiverem interessados, eu lhes mostro como fazer e vocês postam aqui para ajudar o pessoal blz.

    ResponderExcluir
  2. se for para colocar um domínio no blog acho que deveria fazer isso com um domínio pago para ter mais segurança...

    ResponderExcluir
  3. Olá, Fabiano! No painel do meu blog do blogger não aparece a opção de editar template do blog na versão mobile.

    ResponderExcluir
    Respostas
    1. não tem aquele ícone da engrenagem embaixo do template para celular?

      precisa clicar nele e ativar o template antes de editar.

      Excluir
  4. Olá, Fabiano! Quando adiciono o código indicado por você, aparece erro quando salvo. Me ajuda...

    ResponderExcluir
  5. olá fabiano!
    ainda não é possível personalizar a versão mobile do blogger totalmente assim como no wordpress?
    por exemplo, colocar meu logo, personalizar cores, etc?
    :(

    ResponderExcluir
  6. realmente a versão mobile do blogger ainda tem algumas limitações

    ResponderExcluir
  7. Tem como colocar o compositor de comentários do facebook tbm na versão mobile do blogger ?

    ResponderExcluir
    Respostas
    1. eu não tenho os códigos prontos para colocar os comentários do Facebook na versão mobile, mas acredito que seja possível embora talvez tenha problemas com o tempo de carregamento da pagina

      Excluir
    2. Tem como fazer isso tbm nos botões de compartilhamento na versão mobile, meu blog é mais acessado pelo cel e eu quero aumentar o tráfego através das Redes Sociais.

      Por exemplo add o botão do shareaholic no mobile

      div class='shareaholic-canvas' data-app='share_buttons' data-app-id='17812336'></div

      Excluir
    3. tem algumas partes do html do blogger que pertencem a versão mobile, então precisa achar para colocar os códigos nela.

      no caso de um dos meus blogs é no trecho depois de post-footer-line post-footer-line-2

      mas fique atento a velocidade de carregamento do seu blog, afinal colocar mais códigos na versão para celular pode deixar seu blog muito lento.

      Excluir
    4. Valeu pela dica, eu consegui achar uma ferramenta do AddThis para a versão Mobile e deu certo...

      Excluir
  8. Olá. Poderia me ajudar?
    Eu uso o sistema de comentários do Facebook no meu blog, no Blogger, mas não sei como faço para aparecer na versão celular.

    ResponderExcluir
    Respostas
    1. não tenho códigos prontos para colocar os comentários do Facebook na versão para celular, mas talvez isso deixe o blog lento demais.

      Excluir
    2. Bubunoni,
      Melhor seria se seu blog tivesse outro sistema de comentários, como o Disqus. Seria mais fácil integrá-lo para a versão móvel.

      Excluir
  9. Fabiano,

    Para que o layout de meu blog apareça 100% na versão móvel, devo mexer em /* Mobile?
    []'s

    ResponderExcluir
    Respostas
    1. normalmente só precisa ativar a opção de template para versão móvel.... os templates do blogger já vem prontos.

      mas sim, tem alguns CSS no trecho mobile que você pode alterar se quiser.

      Excluir
    2. A versão mobile do Blogger deixa um pouco a desejar em alguns quesitos. Um exemplo, são os títulos dos gadgets, que não ficam com o mesmo estilo se acessarmos pelo celular. Isso deve ser um problema. Mas ficarei mais atento ao assunto, e também nos posts aqui do blog!
      []'s

      Excluir
    3. mas o que você falou sobre mudar aparência da versão mobile está correto, apenas faça backup antes de mexer assim se algo der errado você não estraga o template.

      Excluir
    4. Sim, fazer um backup é essencial. Para um melhor entendimento, eis uma imagem que mostra um pouco do problema que relatei, ou seja, a diferença de exibição dos títulos dos gadgets acessados pelo PC ou celular: (http://i.imgur.com/NKbFtaK.png).

      Excluir
    5. tente usar o inspecionar elemento do firefox ou chrome para achar o nome dos estilos então pode configurar a fonte e tamanho como quer.

      mas como aparência do blog é uma questão de gosto pessoal. Eu não mexeria neste estilo afinal a exibição para celular precisa ser num tamanho menor justamente por causa da tela.

      não sei qual tipo de fonte está configurado no seu blog, mas se usar fontes especiais (que precisam ser carregadas na pagina) o blog pode ficar lento no celular

      Excluir
  10. Obrigada . ajudou muito ! estou começando agora.. meu blog é : Vou esperar sua visita :)

    ResponderExcluir
  11. Fabiano, eu não consigo colocar um gadget da Microsoft Translator (automático) no meu blog
    Me ajude, por favor
    minicontista2

    ResponderExcluir
    Respostas
    1. acho que a maioria dos tradutores não é automático..

      quando a pessoa entra no site ela tem que clicar no tradutor e no caso de alguns navegadores isso já é oferecido automaticamente.

      Excluir
  12. Olá!

    Na versão mobile do blogger, ao deslizar o dedo de lado (para esquerda ou para direita) o blog muda para a postagem anterior/seguinte. isso acontece por exemplo, quando se quer ampliar uma imagem na tela, pois mesmo na versão mobile, algumas imagens aparecem pequenas.

    Isso é bem chato e faz com que o internauta as vezes fique meio perdido, sem saber o que aconteceu.

    Procurei na web algum tutorial que impedisse essa mudança de postagem, mas não achei. Teria alguma solução para isso?

    ResponderExcluir
    Respostas
    1. acho que todos os blogs do blogger são assim na versão mobile. Não sei como alterar isso.

      acho que só é possivel ampliar a imagem com os dedos no celular se a imagem aparecer numa pagina sozinha, ou seja, o visitante teria que clicar na imagem para depois ampliar

      Excluir
  13. Eu meu não mostra no HTML, esta frase!

    ResponderExcluir
    Respostas
    1. qual frase não aparece no seu html?

      o código
      b:widget id='Label1' .....
      isso varia conforme os gadgets que usa este é um exemplo do gadget marcadores.

      Excluir
  14. lement type "b:widget" must be followed by either attribute specifications, ">" or "/>"

    no meu aparece isso

    ResponderExcluir
    Respostas
    1. você deve ter apagado algum sinal por engano.

      qualquer detalhe, por exemplo: ' > < " ou deixou sem espaço entre os códigos.

      outro erro comum é usar o sinal " em vez de '

      se usar " dá erro.

      espero que você consiga resolver o problema com uma destas opções que acabei de mostrar.

      Excluir
  15. Depois que eu utilizei sumiram meus anuncios do adsense

    ResponderExcluir