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
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.
como retirar versão celular no blogger?
ResponderExcluirtipo qnd acesso meu blog no celular fica versão gostaria que fica-se versão normal
Roger
ResponderExcluirveja 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
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?
ResponderExcluirClaudio
ResponderExcluirAcho 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.
Olá, Claudio! Quando adiciono o código: mobile='yes' no gadget, dá erro. Me ajuda resolver isso.
ResponderExcluirdeve ser algum detalhe por exemplo falta ou excesso de espaços em branco antes e depois do código
ResponderExcluirem todos os testes que fiz funcionou... tente excluir o histórico de internet pode ser falha no carregamento da pagina
aqui funcionou perfeitamente galera, de primeira, óima dica, vejo tudo pelo celular também
ResponderExcluir=oD
Ó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?
ResponderExcluirpor enquanto não tem muito o que configurar o blogger para celular.
ResponderExcluirpodemos 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.
Como faço para que, na versão mobile, os gadgets estejam um abaixo do outro?
ResponderExcluirnormalmente os gadgets aparecem um embaixo do outro no celular...
ExcluirVocê 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.
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á.
ResponderExcluirvocê alterou o modelo para celular para "personalizado" como está na imagem deste tutorial?
Excluirna 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.
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?
ResponderExcluirvocê 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
ExcluirFabiano,
ResponderExcluirAdicionei 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)
a versão para celular as vezes dá esse tipo de diferença...
ResponderExcluirprovavelmente 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..
Fabiano,
ExcluirAgradeç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
o código only no html eu só usei em gadgets como está no tutorial.
ResponderExcluiré 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 >
Valeu pela dica, Fabiano!
ExcluirApliquei 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?
a tag pra movel é aquela que mostrei porém já outras em varios tutoriais sobre o assunto.... mas não tenho o link deles...
ResponderExcluirtente pesquisar pelo código no google
Eu já li vários blogs e sites tentando explicar esse assunto mas garanto que este tutorial foi realmente satisfatório!
ResponderExcluirobrigado
ResponderExcluirfuncionou man boaaa da hora obrigado
ResponderExcluirOi Fabiano!
ResponderExcluirQual condicional eu uso para colocar 'mobile='only' em um código que foi colocado diretamente no HTML e não no gadget?
Obrigada!
use esse código para criar condicional no html:
ResponderExcluir< b:if cond='data:mobile' >
códigos para versão mobile
< /b:if >
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.
ResponderExcluirObrigada.
mas o código do banner já está lá no trecho pra versão mobile?
Excluirse tiver deve veja se o b:if não fecha antes do código do banner... pois era para funcionar
É 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:
ResponderExcluirCÓDIGO DO ADSENSE JÁ CONVERTIDO
as vezes o lugar que colocou está dentro de outro código que não é para aparecer na versão mobile.
Excluirtente 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
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é bom saber que conseguiu resolver
ExcluirBoa dica, vou fazer isso!
ResponderExcluirObrigada!
Obrigada. Só deu certo quando adicionei esse [mobile='only']
ResponderExcluirComo encontrar um template para o blogger?
ResponderExcluirno google é só pesquisar template para blogger, mas não sei qual recomendar pois não uso template pronto.
Excluirsugiro 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.