Possuir um template mobile no Blogger é essencial para melhorar a experiência de navegação e melhorar os rankings nos motores de busca. Os templates mobile são normalmente mais “leves”, promovendo um carregamento mais rápido das páginas.
Ao ativar a versão mobile, os usuários do Blogger deparam-se com impossibilidade de fazer modificações diretas no template. Essa limitação pode ser superada com um pequeno truque.
Editar template mobile no Blogger
1. Comece por entrar no Blogger e aceda ao menu “Modelo”. Certifique-se que o template Mobile está ativo, clicando no botão de opções (roda dentada) e ativando a opção “Sim. Mostrar o modelo para dispositivos móveis em dispositivos móveis.”.
2. Selecione o template “Personalizado” e clique no botão “Guardar” (ou Salvar).
3. Agora, clique no botão “Editar HTML” do template para computador para começar as edições. Repare que alguns widgets do Blogger possuem um atributo “mobile” que indica se esse widget deve ser carregado na versão mobile. Você poderá ainda adicionar esse atributo manualmente caso este não exista.
Mobile=”yes” – elemento carregado no template mobile;
Mobile=”no” – elemento excluído no mobile;
Mobile=”only” – exclusivo do template mobile;
Mobile=”no” – elemento excluído no mobile;
Mobile=”only” – exclusivo do template mobile;
Por exemplo, imagine que pretende carregar um elemento exclusivamente no template mobile. Deveria adicionar o código mobile=”only”:
<b:widget id='BlogArchive1' title='Blog Archive' mobile='only' type='BlogArchive'>Alternativa…
No Blogger você também pode adicionar “condições”, permitindo executar determinado código apenas em algumas páginas. Essas condições também podem ser usadas para executar “trechos” de código exclusivamente na versão mobile. Por exemplo:
<b:if cond="data:blog.isMobile">
<!– mostra o link do Blogger na versão Mobile–>
<a href="http://www.blogger.com">
Powered By Blogger
</a>
</b:if>
Personalizar o CSS:
A linguagem CSS permite adicionar estilos a diferentes elementos do seu blog. No Blogger você pode personalizar o CSS do template principal bem como do Template Mobile. Antes de avançar é importante criar um backup do seu template atual.
1. Em primeiro lugar, é importante substituir a tag “<body>” do seu template pela seguinte tag:
<body expr:class='"loading" + data:blog.mobileClass'>
Agora, é só adicionar a class “.mobile” nos elementos que pretende personalizar. Por exemplo:
No template normal o texto encontra-se sublinhado:
.posts{ text-decoration: underline;}
No template mobile o texto não possui estilos:
.mobile .posts{ text-decoration: none;}
Salve as alterações e verifique se as alterações foram implementadas. Possui dúvidas? Envie o seu comentário e ajude-nos a completar o nosso tutorial com informação útil para os nossos leitores.
Nenhum comentário:
Postar um comentário
Por favor leia antes de Comentar