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.

.

27 Comentários

  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

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

    Responder

Deixe um comentário

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