NOVIDADE: Customizar Template do Blogger para Celular

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

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.

Menu para configurar o Modelo de layout para celular do Blogger

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='&quot;loading&quot; + 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.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

21 Comentários

    • 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.

      Responder

  1. 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!

    Responder

  2. 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?

    Responder

  3. 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?

    Responder

  4. 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?

    Responder

  5. 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.

    Responder

  6. 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!!

    Responder

  7. 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

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.