Dicas para Blogger 32 - Como customizar a versão mobile do Blogger

Hoje em dia mais do que nunca as pessoas acessam sites pelo celular, por isso quase todos recomendam que você tenha um site compatível com celulares e tablets, mas o Blogger infelizmente não tem um menu de customização mobile, você pode escolher entre usar um template comum, ou customizar um, mas como você customiza um? Bom, você vai descobrir isso agora mesmo, sem enrolação nenhuma!
Primeiro se você quiser customizar algo você tem de clicar em "Tema" depois na flecha ao lado de personalizar e por último em "Configurações do celular":

Depois disso coloque o tema personalizado, do contrário você apenas usará um template comum, não que tenha algo de errado com isso. 

E pronto, você agora pode customizar sua versão mobile, mas cada área de customização tem um jeito diferente de ser customizado, então para facilitar vamos dividir elas em categorias.

Como customizar o tamanho das imagens de sua versão mobile no Blogger

A primeira coisa que você deve notar ao usar a versão para celular do seu site é que as imagens ficaram ruins, isso porque elas podem ter ficado muito pequenas ou muito grandes, o que você quer são imagens adaptáveis, que sempre ficam otimizadas com o melhor tamanho de maneira automática. Para fazer isso acontecer clique em "Tema", "Personalizar", vá até "Avançado", depois vá para "Adicionar CSS" e cole o código abaixo:

.mobile .post-body img {

width:100%;

height:100%;

display: block;

}

Pronto! Isso fará suas imagens ficarem sempre do tamanho correto na versão mobile do seu site. Confira o antes e depois abaixo:

Como colocar comentários do facebook no celular?

Nós já falamos sobre isso nessa matéria aqui, então se você ainda usar o facebook recomendamos ler ela com atenção.

Como colocar gadgets/widgets na versão mobile do seu Blogger?

Gadgets e widgets podem ser adicionados de uma maneira muito fácil na versão para celular do seu site, basta ir em "Tema" depois em "Editar HTML", depois clicar nos quadradinhos e escolher qual deles você quer levar para a versão mobile.

Depois disso basta você adicionar tags condicionais para fazer eles aparecerem no seu celular, elas são mobile='yes' para fazer eles aparecerem no computador e no seu celular, e mobile='only' para fazer eles aparecerem apenas no celular, mas não no computador. Você ainda pode usar a tag mobile='no' para retirar algo da versão para celular. Mas onde você coloca a tag? No comecinho mesmo, por exemplo, se a linha de código é:

<b:widget id='HTML11' locked='false' title='' type='HTML' version='1'>

Você fará a linha ficar assim:

<b:widget id='HTML11' locked='false' mobile='yes' title='' type='HTML' version='1'>

Notou a diferença? Basta fazer isso com todos os gadgets/widgets que você quiser agora e pronto, eles irão aparecer no celular a partir de agora.

Como customizar o tamanho das letras do Blogger em mobile?

Por último, mas não menos importante, temos as letras, fontes gigantes ficam ruins no celular, e muito pequenas ficam difíceis de ler e podem fazer seus leitores desistirem de você. Para customizar elas vá até "Tema", "Personalizar", "Avançado", "Adicionar CSS" e escolha qual código você quer adicionar da lista abaixo.

Títulos de posts individuais: 

.mobile h3.post-title {
font: normal 20px Kenia;

}

Títulos de posts na página principal:

.mobile-index-title {

font: normal 20px Kenia;

}

Descrição do Blogger em Mobile:

.mobile .Header .description {

font: normal 16px Kenia;

}

Título do Blogger em posts individuais:

.mobile .Header h1 a {

font: normal 20px Kenia;
}

Título do Blogger na página principal: 

.mobile .Header h1.title {

font: normal 22px Kenia;

}

Conteúdo da matéria: 

.mobile .post-body {

font: normal 12px Kenia;

}

Data da publicação: 

.mobile .date-header {

font: normal 12px Kenia;

}

Agora que você colou o seu escolhido vamos customizar ele. O número seguido por px é o tamanho da fonte, aumente ou diminua ele conforme o desejado. E Kenia é a fonte, substitua ela por sua fonte desejada, como por exemplo Ariel, Fonte padrão, Helvetica, etc. E pronto, é isso! Você customizou com facilidade a sua versão mobile do seu site. Agora é só aproveitar... ou quase.

Se você fez tudo certinho você agora só tem mais um problema, dependendo de qual template do Blogger você usa você irá notar que os títulos dos seus posts (por algum motivo idiota) só chegam até a metade da página antes deles continuarem em uma segunda linha. Ficou confuso? Vamos explicar melhor, na imagem abaixo nós colocamos o título a direita da página para você ver que depois de um certo ponto ele simplesmente para e desce para uma segunda linha:

Como você pode ver o seu título acaba ficando "preso", com um espaço em branco gigante que deixa o seu blog com uma cara estranha e amadora, mas agora nós vamos lhe ensinar a resolver isso, abaixo você fica com o antes e depois do nosso passo-a-passo:

Se você quiser que os seus títulos também fiquem assim você irá no seu "Editar HTML" e irá encontrar o seu código (se você já tiver colocado ele é claro) de Títulos de posts na página principal:

 .mobile-index-title {

 font: normal 20px Kenia;

 }

E agora você vai substituir esse código por esse aqui:

.mobile-index-title {

  font: bold 22px Fonte padrão;

  text-align: left;

  width: 100%;

  box-sizing: border-box;

}

Esse novo código irá fazer o seu título parar de ficar "preso" e usar todo o espaço possível, se adaptando para cada tipo de tela automaticamente.

E pronto! Bom, esperamos que tenha curtido, se ainda quiser ver mais dicas fáceis e rápidas para blogueiros clique aqui agora mesmo! Até a próxima e boa sorte!