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 gadjets/widjets na versão mobile do seu Blogger?

Gadjets e widjets 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 gadjets/widjets 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!

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!