![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Uma das melhores novidades do Blogger são os modelos de template para celular, onde o tema reconhece a navegação por um aparelho móvel e troca automático para um layout específico, que funciona melhor nesses aparelhos, seja um celular ou até um iPod. Agora, além dos modelos padrões, você pode criar seu próprio template, customizando alguns detalhes e mantendo o estilo do seu Blog.
Os aparelhos móveis são muito importantes hoje para a internet em geral e as pessoas não usam apenas para acessar redes sociais ou ler e-mails. Seu Blog precisa ser acessível em qualquer plataforma e o Blogger oferece essa possibilidade automática e num menu super simples e fácil, para que seu Blog seja acessível e leve. Incluindo agora a possibilidade de você mesmo customizar um layout fora dos padrões.
Para customizar você mesmo o seu modelo de template para exibição em aparelhos móveis, será preciso algumas modificações.
Ao acessar o menu “Modelo” você verá o template do seu blog junto ao template para “Celular”, como destacado acima. Clicando no botão com o ícone de engrenagem, uma janela com as opções de ativação e customização aparecerá:
Você pode selecionar qualquer dos modelos disponíveis que são os padrões preexistentes do Blogger. Também pode escolher personalizar por si mesmo e criar um layout exclusivo para o seu blog quando ele é acessado via dispositivos móveis.
Essa é a parte complicado, pois exigirá algum conhecimento de códigos, muito testes e tempo para se obter um resultado único. Não é algo simples, mas também não é impossível. A equipe do Blogger disponibilizou tudo o que podemos fazer pelo código fonte para modificar e criar os modelos para celular.
Para fazer as mudanças você precisará acessar o código fonte do seu blog, indo ao menu “Modelo” e clicando no botão “Editar HTML”, que fica abaixo da imagem do template geral do seu blog, como pode ver na primeira imagem desse tutorial.
É possível ativar e desativar alguns gadgets (elementos de páginas) para serem exibidos em celulares. A ideia é que layouts para celulares são mais simples e com menos elementos, priorizando o conteúdo, mas é possível ativar e desativar alguns e até exibir anúncios do AdSense.
Por padrão, os gadgets que sempre aparecerão são:
- Cabeçalho
- Conteúdo
- Perfil
- PageList
- AdSense
- Attribution
Para ativar ou desativar os elementos basta ir ao código fonte e procurar pelos trechos referentes. Como exemplo temos a lista de Arquivo do Blog. O Arquivo não aparece nos celulares, mas para ativar é simples, bastando procurar pela seguinte linha:
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>
E dentro dela adicionar a parte destacada em vermelho:
<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>
Se você percebeu, bastando trocar em mobile=’yes’ para mobile=’no’ você terá o inverso, podendo desativar até os gadgets padrões.
Além disso também é possível fazer modificações no CSS, criando padrões específicos para a visualização na tela de um computador diferente do que será exibido na tela de um celular.
Será preciso modificar a linha <body> para o tipo mostrado abaixo ou certificar-se de que essa linha exista no seu código fonte antes de aplicar algum CSS:
<body expr:class='"loading" + data:blog.mobileClass'>
Com isso você pode adicionar CSS condicionais para cada um dos tipos de templates que você terá, como no exemplo abaixo, usando como formato de aplicação dos códigos:
/* For desktop view */
.date-posts {
margin: 0 -$(separator.outdent);
padding: 0 $(separator.outdent);
}
/* For mobile view */
.mobile .date-posts {
margin: 0;
padding: 0;
}
Se você conhece um pouco de HTML e CSS poderá fazer coisas bem interessantes para o seu blog e tornar a experiência de navegar nele por uma aparelho móvel bem interessante para seus visitantes.
Ainda não descobri tudo o que se pode fazer e ainda não vi ninguém desenvolvendo modelos de templates para celular no Blogger. Sei que esses códigos funcionam também para templates de terceiros e não só para os padrões do Blogger. Isso oferece mais possibilidades de recursos que, acredito, os webdesigners de templates ainda vão explorar.
Como faço para adicionar os códigos do Adsense?
Guilherme,
Você precisa ter uma conta no AdSense ativa e válida e integrar ao painel do Blogger pelo menu “Ganhos”. Automaticamente ficarão disponíveis no layout para celular.
O adsense paga pra cliques em blogs tambem? achei que era so youtube!
ah. obrigada pela aula, estava louca com o blog feio no celular
Pra mim isso não deu certo. Só aparece pra desktop. =/
Caramba que legal !! Assim que tiver um tempo vou começar a pensar em formas de personalizar o meu lay *-* , obrigada pelas dicas Marcos !
Bjão
Por enquanto a melhor versão no nosso Sony Ericsson k550 foi o padrão sem muitas frescuras do próprio blog. Mais ainda assim é muito legal saber que há possibilidade de personalizar ainda mais o modelo para os smartfones. Parabéns!
Bom, Mas eu queria algo ensinando a personalizar. Você tem como achar?
Olá. Eu uso os comentários do Facebook no Blogger; mas este não funciona no Blogger Mobile padrão. Sabe me dizer, por favor, como ativar esse sistema de comentários na versão para celular?
Infelizmente não tem como mesmo.
No artigos em que tenho videos do youtube, na versão mobile o video aparece a ocupar 100% da largura do telefone e o artigo só ocupa metade. Consegue ajudar-me?
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?
Nos artigos onde tenho vídeos do youtube inseridos, ele reduz o artigo para metade, ou seja o video aparece completo, ajustado à largura do telefone, mas o texto só ocupa 50%. Consegue ajudar-me?
Tenho um blog, e apareceu opção de ganho, já tenho uma conta google adsense , que uso no canal do youtube, mas, só que um email diferente, já configurei tudo certinho mais não aparece os bloco de anuncio, fica transparente no lugar do anuncio.
Caio,
Deixe os blocos, mesmo transparentes. Depois de alguns dias (as vezes até algumas horas) são ativados. É por conta de testes que o sistema faz para liberar a exibição.
obrigado flw…
Tem como mudar as resoluções?Só para celular.
Sim, mas tem que saber mexer no código HTML e CSS.
Olá Marcos Lemos…
eu queria apenas, que em meu blogger na versão Mobile, aparecesse o menu e as postagens…
tem como você me ensinar a editar isso na minha caixa html ???
Desde já, agradeço!!
segui todos os passos, sempre consegui seguir os tutoriais legais daqui do FB, mas dessa vez não consegui. O blogspot nesse ponto é limitado em relação ao WordPress
omo faço para deixar a mesma versão do computador no celular? A desktop
Adorei sua dica, vou testar logo e aviso por aqui. Muito obrigado
Como faço pra deixar o bloger abrir automaticamente em versao desktop no celular?
Basta desativar a opção do template para celular.
Fiz esse procedimento, só que o link para ir para a versão web sumiu. Suponho que seja por causa de alguma alteração que eu já tinha feito na versão web, mas não sei como fazer para esse link voltar.
Eu uso um template que tem já incluso nele uma visualização mobile, porém eu gostaria que da forma que fosse visto no PC também abrisse no celular, é possível ?
Eu gostaria qeu meu site fosse visto no celular como é visto no PC, é possivel ?
Valeu. Resolveu como aparecer meu blog em celulares.