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.
Escolher modelo de layout do Blogger para celular
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.
Fonte: ferramentasblog
Valeu equipe do Blogger pelas excelentes dicas.
ResponderExcluir