Muitos bloguers dedicam muito tempo e esforço para criar um visual exclusivo para o blog. Por isso, hoje temos o prazer de anunciar que os modelos personalizados agora também podem ser visualizados em dispositivos móveis.
Se você tiver um modelo personalizado para o seu blog e quiser que ele seja exibido também em navegadores para dispositivos móveis, acesse a guia "Modelo" do seu painel, clique no ícone de roda dentada abaixo da visualização do modelo para celular.
Em seguida, selecione "Personalizado" no menu suspenso "Escolher modelo para celular".
Seu modelo pode não parecer exatamente o mesmo em um navegador para dispositivos móveis, portanto, clique em "Visualizar" para garantir que ele apareça da maneira desejada antes de salvá-lo.
Se você tiver gadgets no seu blog, também poderá controlar quais deles estarão disponíveis no modo de exibição móvel, usando este novo atributo: mobile na tag <b: widget>. Pode ser 'padrão', 'sim', 'não' ou 'somente'.
Os widgets exibidos no celular por padrão são os seguintes:
Cabeçalho
Blog
Perfil
PageList
AdSense
Atribuição
O widget a seguir não estará disponível na visualização móvel, porque é um widget BlogArchive.
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>
Para disponibilizá-lo na visualização móvel, adicione o atributo mobile = 'yes' a ele.
<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>
A definição de dispositivos móveis como "não" faz com que um widget não seja exibido na visualização móvel, mesmo que esteja disponível na visualização móvel por padrão.
<b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>
Você também pode disponibilizar um widget apenas na visualização para celular definindo-o como "somente".
<b:widget id='BlogArchive1' mobile='only' title='Blog Archive' type='BlogArchive'>
O conteúdo de um widget pode ser modificado para exibição móvel com os dados variáveis booleanos: blog.isMobile.
<div class="widget-content">
<b:if cond="data:blog.isMobile">
<!-- Show a text link in mobile view.-->
<a href="http://www.blogger.com">
Código desenvolvido pelo Blogger
</a>
<b:else/>
<!-- Show an image link in desktop view.-->
<a href="http://www.blogger.com">
<img expr:src="data:fullButton" alt="Powered By Blogger"/>
</a>
</b:if>
</div>
O modelo HTML acima mostra conteúdos diferentes entre a visualização da área de trabalho e a visualização móvel, dependendo do valor da variável data: blog.isMobile.
É possível atribuir condicionalmente diferentes propriedades CSS a uma mesma classe entre a visualização da área de trabalho e a visualização móvel, pois a tag <body> dos modelos para dispositivos móveis do Blogger tem a classe móvel como sua classe. Primeiro, verifique se a tag <body> do seu modelo personalizado é a mesma que a seguinte.
<body expr:class='"loading" + data:blog.mobileClass'>
Em seguida, você pode definir diferentes propriedades de CSS para a área de trabalho e a visualização móvel.
/* For desktop view */
.date-posts {
margin: 0 -$(separator.outdent);
padding: 0 $(separator.outdent);
}
/* For mobile view */
.mobile .date-posts {
margin: 0;
padding: 0;
}
Esperamos que você goste de criar seus próprios modelos para celular.
Desenvolvido pelo Blogger : para Atualização de dados alterados: mobile to data: blog.isMobile
0 Comentários
Achou este artigo interessante? Então comente, compartilhe, curta, envie ou recomende aos amigos nossos artigos.