Como Personalizar o Blogger na versão para celular

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

 Como Personalizar o Blogger na versão para celular


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='&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.

Fonte: ferramentasblog

Postar um comentário

1Comentários

Postar um comentário

#buttons=(Accept !) #days=(20)

Nosso site usa cookies para melhorar sua experiência. Check Now
Accept !