Personalizar o blog na versão para celular + template grátis para baixar

Você está acompanhando a Série Personalizar o blog na versão para celular?
Não???
Então se liga nos posts já publicados:
Série Como personalizar o blog na versão para celular
Personalizar o blog na versão para celular: Mostrar gadgets e botões de compartilhar
Personalizar o blog na versão para celular: Menu responsivo


Hoje vamos ao 4º post da série, e nele nós vamos focar em uma área pouco explorada dos templates nativos do Blogger: a área Mobile.
Dependendo do modelo escolhido essa área pode apresentar algumas diferenças mas basicamente os comandos funcionam do mesmo jeito em qualquer modelo nativo do Design de Modelo.
Claro, precisa paciência e testar sempre.


Em geral, quando vemos o template do blog pelo celular, aparece assim (claro, com seu modelo):

Ele mostra o link para comentários, a data, o tamanho da fonte do texto segue o tamanho definido na versão web, etc...
No tutorial de hoje vou ensinar como retirar os comentários, retirar o fundo caso tenha, aumentar o tamanho da fonte do texto e outros truques simples.
Vamos?
Então vamos!

Personalizando a área Mobile do blog

A maneira de modificar a aparência do blog na versão mobile é bem simples.
Tudo o que você desejar modificar deve ser precedido do comando .mobile{ e ser inserido dentro da área Mobile do seu template.
Ela começa assim:

/* Mobile
----------------------------------------------- */

Tudo o que quiser acrescentar pode ser colocado abaixo disso.
Vou exemplificar:

Para retirar o link dos comentários da tela inicial insira dentro da área Mobile esse comando:
.mobile .comment-link{ display: none;}

A parte destacada em azul é o que define a área a ser ocultada, no caso, o link para comentar, ou comment-link.

O comando display: none define que o link para comentar será ocultado na versão mobile do seu blog.

Entendeu?

Compreendido isso vamos ver como personalizar outras áreas do template do blog na versão para celulares:

1- Para retirar o link dos comentários da tela inicial:

.mobile .comment-link{ display: none;}

2- Para aumentar o tamanho da fonte do texto da postagem na página interna do post:
.mobile .post-body {font-size: 20px;}
O valor 20px você altera para mais ou para menos conforme desejar.

3- Para retirar retirar a data:
.mobile .date-header span {display: none;}

4- Para retirar o fundo caso tenha imagem ou queira trocar a cor:
.mobile .body-fauxcolumn-outer {background: #fff;}
O valor #fff você altera para a cor que desejar. Nesse caso #fff define que o fundo será branco.


Copiar todos os códigos

Como você vê são várias opções de personalização.
Vá mexendo, descobrindo o que funciona em seu blog, o que não funciona...
Então vamos rever o que já aprendemos até aqui:

Inserir gadgets e botões de compartilhamento na versão para celular
Colocar um menu responsivo no blog que funcione no celular
Personalizar a área mobile do blog, alterando fontes, elementos, etc...

Já dá pra se divertir, né?
Olha nosso template Adeline como é visto no teste mobile friendly:

Visualizar o template no Teste de compatibilidade

Visualizar o template no Teste de Velocidade

Presente para você -Template Adeline grátis para baixar

Agora, como prometi, segue o link para você baixar e usar o Template Adeline que usamos como base para essa minissérie de tutoriais Personalizar o blog na versão para celular.
Além do que ensinei nessa minissérie acrescentei:

 1- os botões especiais de compartilhar;
 2- as postagens relacionadas ao final dos posts;
 3- o slide de postagens recentes;
 4- personalizei as Postagens mais vistas;
 5- personalizei os títulos dos gadgets;
 6- personalizei as tags;
 7- inseri a paginação numerada igual à minha.

Veja como ele ficou:

Na pasta zipada que você vai baixar estão:
O código-fonte do template, exatamente como ele está agora.
O código da caixa de pesquisa.
O código da paginação numerada.
O código do slide. Lembre de colocar o endereço de seu blog onde está o endereço do meu, ok?
Caso queira retirar o slide basta não inserir o código dele e apagar no código-fonte o trecho que começa com /* Slide de postagens recentes */ e termina com /* Final do Slide de postagens recentes */
Também está na pasta a imagem que usei no cabeçalho, já no tamanho certo,  a mesma imagem em tamanho extra grande.
Se quiser usar outra imagem fique à vontade.

Amei! Quero baixar e usar!

Para baixar o seu pack você precisa apenas clicar no botão verde abaixo, escolher em qual rede social deseja compartilhar o link e pronto! É só baixar no site MediaFire, descompactar o arquivo e usar como desejar.

Só tem 2 regras:
1- Não pode, em hipótese alguma, retirar ou modificar os créditos do rodapé.
2- Não pode usar como base pra vender dizendo que foi você que fez.

Pode alterar cores, fontes, imagem do cabeçalho, imagem de fundo... fique à vontade!
É tudo alterado direto pelo painel no Blogger, na aba Modelo/Personalizar/Avançado.
As personalizações do meu (como inserir os links) estão explicadas nos posts da Série Personalizar o blog na versão para celular.

Olha o mesmo template em tons mais "masculinos":

Clique sobre a imagem e veja em tamanho real

Viu como é possível personalizar e torna-lo bem diferente?
Concorda com as regrinhas?
Então baixe seu template e use à vontade em seu blog!

Baixar o template Mobile

Muito obrigada por acompanhar a série e baixar o template que modificamos durante os tutoriais!
Espero que seja útil e que você se divirta!
Enjoy!!!!